angular无法访问指令属性
Angular是一种流行的前端开发框架，它使用指令来扩展HTML语法并实现动态的页面交互。在Angular中，指令是一种特殊的HTML属性，用于向HTML元素添加行为和功能。
当遇到无法访问指令属性的情况时，可能有以下几个原因：
- 属性绑定错误：确保指令属性正确地绑定到组件的属性。在Angular中，可以使用方括号（[]）将指令属性绑定到组件属性。例如，如果有一个名为"color"的指令属性，可以使用以下方式将其绑定到组件的"myColor"属性：
<my-component [color]="myColor"></my-component>- 指令属性命名错误：确保指令属性的名称正确。在Angular中，指令属性的名称应该与指令类中定义的属性名称相匹配。
- 指令属性未在指令类中定义：确保指令属性在指令类中正确地定义。在指令类中，可以使用@Input装饰器来定义指令属性。例如：
@Input() color: string;- 指令未正确导入或声明：确保指令已正确导入并在模块中声明。在使用指令之前，需要将其导入到组件或模块中，并在@NgModule装饰器的declarations数组中声明。
- 指令属性的访问权限错误：确保指令属性具有公共的访问权限。在指令类中，可以使用public关键字来指定属性的访问权限。
总结起来，当无法访问Angular指令属性时，需要检查属性绑定、属性命名、属性定义、导入声明和访问权限等方面的问题。如果问题仍然存在，可以参考Angular官方文档或搜索相关问题的解决方案。
腾讯云提供了一系列与云计算相关的产品，可以根据具体需求选择适合的产品。具体推荐的产品和产品介绍链接地址需要根据实际情况进行选择。
相关·内容
2回答
我是个角的初学者。我学习了角路由教程，我对下面的代码表示怀疑，在这些代码中，一个控制器的$scope似乎被另一个控制器访问。据我所知，我们无法访问一个控制器的$scope的数据，而另一个控制器则无法访问。有人能解释一下这种情况吗？密码在这里很好。
<html lang="en" ng-app="myApp">
<body>
<div ng-controller="directoryController">
<div ng-view>
</div>
</div&g
浏览 9提问于2016-02-09得票数 2
回答已采纳
在我的应用中使用Angular1。当用户将某个文件拖放到特定区域(div)时，需要触发函数。我尝试过ondragenter，但在这种情况下无法访问控制器中定义的函数。尽管如此，ondragenter中的警报功能仍然有效。在Angular1中有没有onDragEnter的替代品？或者，我怎样才能为同样的东西创建一个新指令呢？
浏览 3提问于2016-08-17得票数 0
1回答
我有一个简单的应用程序，但是我无法访问指令控制器中的$scope值。
app.js
var myApp = angular.module('myApp',['ngAnimate']);
controller.js
myApp.controller('controller1',['$scope',function($scope) {
$scope.helloText = 'text';
}])
directive.js
myApp.directive('myPanel',function(){
浏览 0提问于2015-12-04得票数 1
回答已采纳
如果我更改一个控制器变量(变量包含px中的高度，比方说445)，我想在HTML中更新div元素css属性(min高度)。
问题是，指令中的变量总是未定义的。我也尝试过使用$watch，但仍然不起作用。
下面是一个jsfiddle演示：
以下是源代码：
<div ng-app="ctrl">
<div ng-controller="TempCtrl">
<span temp-directive>here we go</span>
</div>
</div>
联署材料：
angu
浏览 6提问于2015-03-17得票数 1
回答已采纳
1回答
我正在尝试测试一个指令，它是在根模块的另一个子模块的子模块中定义的。我无法访问指令的控制器中定义的作用域变量。问题似乎在于从测试内部访问作用域。
主模块名为oppia，它有一个名为stateEditorModule的子模块，此子模块还有一个名为stateContentEditorModule的子模块。我尝试过注入$scope而不是$rootScope，但似乎不起作用。
下面是测试代码：
beforeEach(function() {
module('oppia');
module('stateEditorModule');
modul
浏览 0提问于2019-04-15得票数 0
由于某些原因，即使我尝试使用ngOnInit()方法，也无法访问属性的@Input值。
index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- IE required poly
浏览 3提问于2016-03-28得票数 2
回答已采纳
1回答
嵌套复杂指令不被执行？
、、、
我试图遵循 by ，在这里，他通过将指令分类为组件和容器来解释指令。
因此，我尝试这样做，有一个容器(幻灯片)将容纳不同的项目(文本区域，图像，视频.)但我的例子更有活力。
他的例子是这样的：
<panel title="{{title}}">
<element text="{{body}}"></element>
</panel>
但我的更像这样：
<slide ng-repeat="slide in slides" slide-id="{{slide.id}}">
浏览 3提问于2013-04-24得票数 0
回答已采纳
我有两个例子支持上述说法-
1)使用$scope ()时-
<!DOCTYPE html>
<html>
<head>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script>
angular
.module('myApp', [])
.directive('directive1', function()
浏览 3提问于2017-10-27得票数 1
回答已采纳
1回答
我是angular的新手，我不确定如何处理日期。我和name和date of birth有一个form。
在提交之前，我想检查此人是否超过18岁，并在提交表单之前显示一条错误消息。但除非提交，否则我无法访问form中的dob变量。在我的代码中，我只能在addContact()中访问$scope.contact.dob (在提交日期之后)。如何在递交表格前核实出生日期？
我的代码片段如下所示
<form>
<input ng-model="contact.name">
<input ng-model="
浏览 0提问于2015-10-08得票数 1
1回答
我对均值叠加比较陌生，我正试图在一个项目中包含一个角甘特图。根据github上的文档，我遵循了所有的步骤，但是我不断地发现一些错误。以下是我所采取的步骤的简要概述。
安装角度甘特图使用
安装角钢-甘特-保存
我使用以下方法查找依赖项：
咕噜绳
我将资产/转角-gantt.js和资产/gant.css添加到了由yo env生成的config/env/all.js文件中。
我在publlic/config.js文件中将gantt模块包含到我的角应用程序模块中
5.我还在角-甘特文件夹中发出咕噜声，以构建角-gantt.min.js和角-gantt.js，我还意识到这些文件还
浏览 3提问于2014-11-04得票数 0
回答已采纳
我需要一个“粘性”指令，当它位于页面顶部时，它会向元素中添加一个css类，并指示其状态的变化。因此，我定义了一个类似于{ onStickyChange: '&' }的范围。现在我想在angularjs组件中使用该指令，如下所示：
<my-component sticky on-sticky-change="$ctrl.onStickyChange(sticky)">
</my-component>
当被粘贴/未粘贴时，我希望指令会通知父控制器。但是，我得到了以下错误：
错误：$compile:multidir多个指令myComp
浏览 4提问于2017-07-19得票数 1
回答已采纳
当我使用angular的指令时，我得到了这个错误。
Error: [$compile:tplrt] Template for directive 'header' must have exactly one root element. /apps/dhe.techForm/views/directives/header.html
http://errors.angularjs.org/1.4.8/$compile/tplrt?p0=header&p1=%2Fapps%2Fdhe.techForm%2Fviews%2Fdirectives%2Fheader.h
浏览 0提问于2016-02-26得票数 0
这里发生了什么事？
以下是我的指令：
app.directive('submitRequired', function (objSvc) {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
// do something
}
};
});
以下是正在使用的指令的示例：
<input submit-required="true"></input>
浏览 82提问于2014-02-16得票数 88
回答已采纳
控制器在指令下面。我正在尝试获得适当翻译的语言代码。这是在控制器级别上做的事情。
PaymentPage.get($scope.pageTag)
.success(function(response) {
$scope.product = response;
console.log($scope.product);
// get the language of the product assuming its a valid language code
var lang_stri
浏览 0提问于2015-04-29得票数 1
我是angular (和javascript)的新手。我正在尝试构建一个指令，其中一部分需要向指令的作用域中添加一个数组。我的指令代码如下所示：
.directive("startupSections", function(){
return {
restrict: "E",
transclude: true,
scope: {
title: "@",
sections: [1,2,3]
},
link: fun
浏览 2提问于2017-05-03得票数 0
我正在尝试为指令编写测试，所以我使用$compile手动构建它。(是的，我知道我可以使用e2e测试，但在本例中，我想测试一些独立于DOM的逻辑，所以我使用单元测试方法。)
我有一个用scope: {foo: '='}绑定到的字段。当我试图在指令的作用域上设置它时，我得到了以下错误：
Error: Non-assignable model expression: undefined (directive: foo)
at Error (<anonymous>)
at $get.parentSet (https://ajax.googleapis.com
浏览 0提问于2012-11-28得票数 16
回答已采纳
1回答
因此，从本质上说，HTML看起来像：
<data>
<definition-data></definition-data>
</data>
在我的数据模板文件中，我有以下内容，它可以工作：
<div ng-controller="dataCtrl as dataitems" ng-cloak>
{{dataitems.loadItem}}
</div>
在我的定义-数据模板中，我试图访问dataitems.loadItem，但是尽管它继承了数据的父范围，但还是无法访问。
我试过：
<d
浏览 2提问于2014-11-06得票数 0
回答已采纳
嗨，我正在尝试让下拉指令从UI引导程序开始工作。每当我尝试使用“下拉”指令时，都会收到以下错误消息：
控制台错误消息：
Multiple directives [dropdown, dropdown] asking for 'dropdown' controller on: <li class="dropdown pos-stc" dropdown="">
http://errors.angularjs.org/1.3.9/$compile/multidir?p0=dropdown&p1=dropdown&p2=
浏览 3提问于2015-01-17得票数 4
回答已采纳
我已经升级了angularjs元素指令，以便在角4中使用。
myScores.js
angular.module('app.components.directives.myScores', [])
.directive('myScores', function() {
return {
scope: {
score: '=',
},
template: '<div>>>> Your score is {{score}} <&
浏览 2提问于2017-08-30得票数 11
1回答
我有两个指令，我想在其中一个中公开一个API，供其他人使用。在的指导下，当我需要另一个指令的控制器时，我得到了这个错误：
Error: No controller: foo
at Error (<anonymous>)
at getControllers (http://localhost:3000/vendor/angular/angular.js:4216:19)
at nodeLinkFn (http://localhost:3000/vendor/angular/angular.js:4345:35)
at compositeLinkFn (
浏览 2提问于2013-03-30得票数 3
我正在尝试创建一个angular组件，一个时间选择器，使用普通的javascript模型，我希望组件的控制器公开一个api并使用ngModel。我是angular的新手，不知道如何使用ngModel。我在模板中有两个输入，分别是小时和分钟。我的问题是我不知道如何将ngmodel参数传递给控制器。
我准备了一个柱塞：
(function() {
var app = angular.module('plunker', []);
function DemoController() {
this.tpVal = {
hours: 10,
m
浏览 0提问于2015-11-22得票数 1
在angular2中，这些angular1事件的等效性是什么？
$routeChangeStart，$routeChangeSuccess，$routeChangeError
我想使用根应用程序组件中的这些事件来处理任何路由更改。
提前感谢
更新
如果我使用OnActivate，OnDeactivate事件，它需要将它添加到每个组件中:(
另外，我试图实现我自己的RouterOutlet，但我无法访问以前关于激活、禁用事件的指令，而且我也不知道如何处理路由更改错误
另外，router.subscribe只给了我一个名字，但是我想要得到当前和下一个指令对象来更改一些属性。
我
浏览 4提问于2015-11-05得票数 5
2回答
我想使用ui-router，当我将ui-view添加到div元素时，我正在使用Netbeans。NB是否告诉我，ui-view目前不允许作为attr？为什么不是它有什么问题呢？这是我不能工作的代码。
<div id="kindle" ng-controller="kindle">
<div class="container-fluid">
<div ui-view="content"></div>
</div>
</div>
浏览 0提问于2014-09-28得票数 1
我不明白为什么我们会有这种行为？
是否有义务使用“小写”指令？
这是工作:
// client/routes.js
angular.module('socially').config(function ($urlRouterProvider, $stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state('subjects', {
url: '/subjects',
te
浏览 3提问于2016-02-18得票数 1
回答已采纳
2回答
指令：
'use strict';
var foodMeApp = angular.module('foodMeApp', ['ngResource', 'breeze.angular.q']);
foodMeApp.directive('angularReleases', function(){
return {
restrict :'EA',
link : function($scope, $http){
$http.get('http://ap
浏览 2提问于2014-03-14得票数 0
回答已采纳
当使用像*ngIf template这样的结构指令时，它看起来像angular在源代码中插入诊断注释。
1)为什么有用，以后如何使用？
2)这是angular 2在*ngIf中动态添加模板的方式吗？
在使用时
<ng-template [ngIf]="hero">
<div>{{hero.name}}</div>
</ng-template>
Angular在html中插入以下注释。
浏览 0提问于2017-11-23得票数 1
1回答
尝试跳入角形2，有一些角度1的经验和一些谜题。
我做了一个共享模块：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Constants } from './injectables/constants';
import { Utils } from "./injectables/utils";
import { HighlightDirective }
浏览 4提问于2016-11-03得票数 1
回答已采纳
1回答
我试图在学习角2的同时设置一个简单的路由，每当我点击一个链接，浏览器就会被路由到新的路径，但是浏览器正在重新请求所有的资源(而不是单页应用程序)。
我的索引文件，
<!--... . . various scripts and styles . . . . . --->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"
浏览 0提问于2016-03-02得票数 4
回答已采纳
我的场景是，我需要呈现来自数据库的HTML内容。HTML内容包含表达式和ng特定的属性/元素。我已经被引导到指令领域--但我不确定如何实现--因为我无法访问能够返回模板字段的$scope：
var app = angular.module('app', []);
app.directive('dataPresenter', function () {
return {
restrict: 'AE',
replace: 'true',
浏览 0提问于2014-04-24得票数 0
1回答
在以下代码中，
<!DOCTYPE html>
<html ng-app="app14" ng-cloak>
<head>
<meta charset="UTF-8">
<title> Angular built-in services</title>
<style>
[ng\:cloak], [ng-cloak], .ng-cloak{
display: none;
浏览 2提问于2016-03-25得票数 1
2回答
我希望像这样在指令中设置默认值，但它将为null
(function(angular) {
'use strict';
angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
}])
.directive('myDialog', function() {
return {
restrict: 'E',
t
浏览 2提问于2015-09-01得票数 1
回答已采纳
我已经在端口4000上部署了一个angular通用应用程序，并使用了一个反向代理来使它在端口80上运行。
应用程序路径:/var/html/www/eduglobe/eduglobe/(我以domainname.com身份访问此路径)
但是我无法访问以下路径:/var/html/www/test/index.html(我无法访问domainname.com/test/index.html)
php和node.js服务器工作得很好。
启用站点的代码000-default.conf
ProxyRequests Off
<Proxy *>
Order deny,al
浏览 5提问于2019-05-21得票数 0
3回答
我想使用AngularJS提供的内置表单验证。但是，在表单中，我使用了自定义指令，每个指令都有一个独立的作用域。因此，表单元素无法访问绑定值。
你知道怎么解决这个问题吗？
或者，是否可以在不使用表单的情况下使用AngularJS验证？
ng-minlength和ng-required指令不会触发表单验证。
<div ng-app="myApp" ng-controller="myCtrl">
<form name="myForm" novalidate>
<do-something ng-mo
浏览 0提问于2014-06-23得票数 6
在这个中，我调用了一个指令，该指令使用"&“操作符从父作用域中获取函数"test”。为什么当我尝试使用这个函数时，它会返回“未定义”？
HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base
浏览 1提问于2014-05-15得票数 0
回答已采纳
我正在学习这篇教程。
但是我一直收到这个错误：
EXCEPTION: No Directive annotation found on CoursesComponent
我的app.components.ts看起来像这样
import {Component} from 'angular2/core';
import {CoursesComponent} from './courses.component';
@Component({
selector: 'my-app',
template: '<h1>He
浏览 0提问于2016-12-05得票数 1
在ngModelController示例的Angular文档中，javascript文件如下所示：
angular.module('customControl', []).
directive('contenteditable', function() {
return {
restrict: 'A', // only activate on element attribute
require: '?ngModel', // get a hold of NgM
浏览 5提问于2013-06-12得票数 3
1回答
我有下面的html
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div ng-con
浏览 1提问于2014-03-08得票数 0
回答已采纳
我试图使用 -自动完成指令的AngularJS，没有任何运气。问题是:从自动完成列表中选择的值不会更新我的模型。
角应用
var app = angular.module("workScheme2App", ['angucomplete-alt']);
workScheme2App.controller('SMSController', function ($scope, $http) {
this.anketa =
{
DeliveryAddress_Province: {
id: 0
浏览 3提问于2015-02-19得票数 2
回答已采纳
2回答
角条件多选择指令
、、
我正在创建一个选择框指令，作为其中的一部分，我需要指定select是否为多个。
我尝试在我的一个作用域对象中设置一个多个属性，假设它将在选择箱上执行并设置multiple="multiple"，其值为" multiple“，如下所示：
<select multiple="{{properties.multiple}}" /*...(other working properties)...*/ ></select>
但这让我犯了个错误..。
Error: [$compile:selmulti] http://errors.angul
浏览 6提问于2015-09-14得票数 0
回答已采纳
我的问题是，在仍然处于混合模式(使用Angular2 )的情况下，我试图在ES5中创建一个ES5属性指令。所以所有的Angular2代码都被转换成NG1，这是通过使用UpgradeAdapter的'downgradeNG2Component‘函数来完成的，但是由于我正在创建一个指令，而不是一个组件，所以我需要使用一个'downgradeNG2Directive函数’，尽管它并不存在。
但是你就不能用NG1编写它吗？->，不，我正在从角度1移植到2，并且需要代码本身是Angular2
该指令只是一个简单的autoFocus指令，只要“li公共自动焦点”是一个属性，它就会聚焦
浏览 3提问于2016-07-22得票数 4
我有一个angular 4应用程序，它使用angular flex进行布局，而不是Bootstrap。
但对于每个div标记中的对齐，我必须给出：
fxLayout.xs="column"
fxLayout="row"
fxLayoutAlign="start center"
fxLayoutGap="18px"
有人能建议如何重用这些指令而不是为每个标签编写它吗？
浏览 0提问于2017-11-17得票数 0
1回答
我试图使用角JS来显示或隐藏基于spring安全角色的HTML元素。为此，我创建了一个服务和指令。我正在从服务器获得数据，但是我无法访问我在服务中获得的数据。这是我的密码
app.service('MyService', function($http, $rootScope) {
this.data = [];
var _this = this;
$http.get('permissions').then(function data(response) {
_this.data=response.data;
浏览 1提问于2016-03-18得票数 1
回答已采纳
我试图在AngularJS中构建一个包含其他AngularJS指令的模板的指令。我所有的指令都需要一个"id“属性，所以我需要在模板内的指令上设置"id”。然而，无论我如何做到这一点，AngularJS总是抛出这个错误：
Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{field.id}}] starting at [{field.id}}].
http://errors.angularjs.org/1.4.6/$parse/s
浏览 6提问于2015-11-17得票数 1
回答已采纳
1回答
其要点是，在下面的代码中，我需要“modalDirective”来访问要创建的元素列表，这些元素位于“modalController”中。我还需要“modalDirective”来创建一个HTML，该元素使用ng模型绑定到'modalController‘中的一个作用域变量，所以如果有其他方法来完成这些操作，我完全可以接受。
我使用以下参数打开一个模型：
var modalOptions = {
templateUrl: 'targetUrl/modalPage.html',
controller: 'modalController'
}
浏览 0提问于2018-10-18得票数 0
回答已采纳
2回答
我正在实现一个就地编辑功能，其中字段在用户单击按钮后变为可编辑。下面是两条指令：
按钮的指令：
.directive('editbutton', function() {
return {
restrict: 'A',
template: '<div ng-hide="editorEnabled>' +
'<button class="btn btn-small" ng-click="enableEditor(item)">
浏览 1提问于2013-06-22得票数 1
我的项目中有几个子模块，其中一个是SharedModule (它为所有人共享模块)。
SharedModule包括FormsModule和ReactiveFormsModule导入。我将这个模块导入到我想要使用表单的模块中，但它不起作用。
组件模板块
<div class="md-form">
<input [formControl]="personGroup.get('medication')" [ngModelOptions]="{standalone: true}" mdbActive type="
浏览 0提问于2018-04-28得票数 6
回答已采纳
我刚刚开始使用Angular，我想知道默认的angular指令是否有任何限制。如果没有，我们可以覆盖默认的angular指令并设置一些限制吗？
我需要创建一个应用程序，我不希望任何人使用"class“、"comments”或"element“调用指令。我可以在我的angular应用程序中应用这个限制吗？
浏览 3提问于2016-10-21得票数 0
我正在尝试将D3包含到我的Angular应用程序中，但似乎无法从Bower安装中加载D3，因为Angular说它找不到它，或者它拼写错误。应用程序被设置为使用gulp来获取bower_components并从那里进行构建。d3是否有什么不同，使其不被包含在gulp构建过程中？
这是我的组件，我无法访问D3源代码。难道我不能从bower安装中访问它吗？我见过一些堆栈溢出问题，他们说要在工厂中创建一个简单的" d3“模块并从它返回一个d3变量，但我在window.d3中没有定义...？
angular.module("diagram", ["d3"])
浏览 0提问于2016-05-21得票数 2
1回答
角6设置指令
、、
似乎我无法使指令在我的应用程序中工作。我没有收到任何错误，当我在堆栈闪电战中复制时，它工作得很好。当我第一次尝试实现这个指令时，我是，但我犹豫不决地说，这实际上是我的应用程序中“自定义指令”本身的一个问题.最后没人回答这个问题。现在我带着更多的信息来找你。
请让我知道。，你看到我的设置有什么问题吗？我错过了什么？，我觉得我什么都试过了。
以下是我尝试过的：
在Stackblitz工作:我知道如何制作。
但是这个非常简单的指令在我的应用程序中不起作用(请在下面找到代码)(澄清:不工作=我没有看到console.log或影子指令应该应用的属性).模板：
指令：
模块：
我尝试过像上面这样在最
浏览 0提问于2018-10-15得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
