新的 Angular 。所以只是不明白为什么下面的代码和指令不起作用。我在代码中提出问题的地方。
页面中未显示商品名称和价格。
几个问题
require: 'ngModel', 的含义是什么?
指令中的 Controller 是什么?
Controller 选项何时触发?
当人们在指令中声明 Controller 选项时?
请详分割享知识吗?
HTML 代码:
<div ng-app="myApp">
<ul ng-controller="MyController">
<li my-directive price="item.price" ng-repeat="item in products">
{{item.name}} — {{item.price}}
</li>
</ul>
</div>
Angular Controller :
var myApp = angular.module('myApp', []);
myApp.controller('MyController', function MyController($scope) {
$scope.products = [
{
'name' : 'Xbox',
'clearance' : true,
'price' : 30.99,
},
{
'name' : 'Xbox 360',
'clearance' : false,
'salesStatus' : 'old',
'price' : 99.99,
},
{
'name' : 'Xbox One',
'salesStatus' : 'new',
'price' : 50,
},
{
'name' : 'PS2',
'clearance' : true,
'price' : 79.99,
},
{
'name' : 'PS3',
'salesStatus' : 'old',
'price' : 99.99,
},
{
'name' : 'PS4',
'salesStatus' : 'new',
'price' : 20.99,
}
]
})
Angular Directive(指令):
myApp.directive('myDirective', function(){
return {
scope: { price: '=' },
require: 'ngModel',
link : function(scope){
console.log(scope.price)
alert('scope price '+scope.price);
},
controller: function(scope, element, attrs, ngModel){
console.log(ngModel.price);
console.log(scope.price);
alert('ngModel price '+scope.price);
alert('scope price '+scope.price);
},
template: 'Name: {{item.name}} Address: {{item.price}}'
}
});
最佳答案
what is the meaning of require: 'ngModel', ?
当您想要要求另一个指令的 Controller
时。在这里,您尝试调用 ngModel 指令的 Controller 。
指令的what is controller in directive ? when controller option fire ? when people declare controller option in directive ?
Controller
是在上下文中定义的,可以将其注入(inject)到其他指令中以实现指令间通信
。
这里有一篇关于指令生命周期执行的详细文章,可以帮助您做得更好。 http://odetocode.com/blogs/scott/archive/2014/05/28/compile-pre-and-post-linking-in-angularjs.aspx
您共享的 fiddle 中有很多错误,已更正一些错误以打印从 view
传递到 directive
的值进行显示。
https://jsfiddle.net/6am7xd0r/2/
关于javascript - AngularJS:指令未触发或工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36548681/