我正在研究 Angular 指令，但在使用隔离范围时遇到了麻烦。我正在制作一个非常基本的指令/ Controller ，并只是试图通过将范围属性设置为“&”前缀来在指令内对 ng-click 发出警报。我已经盯着它看了 45 分钟了，看不出我做错了什么，但是单击按钮时没有任何反应(虽然其他 2 个前缀正在工作)。这是指令/ Controller 的代码:
(function() {
'use strict';
angular
.module('mePracticing')
.directive('practiceDirective', practiceDirective);
function practiceDirective() {
var directive = {
restrict: 'AE',
scope: {
movie: '=',
rating: '@',
display: '&'
},
template: '<div>Movie: {{movie}}</div>' +
"Enter a movie: <input type ='text' ng-model='movie'>" +
"<div>Rating: {{rating}}</div>" +
"<div><button ng-click='displayMovie(movie)'>CLICK ME</button></div>"
};
return directive;
}
})();
(function() {
'use strict';
angular
.module('mePracticing')
.controller('practiceController', practiceController);
function practiceController($scope) {
$scope.movie = 'The Big Lebowski';
$scope.rating = 1000101010;
$scope.displayMovie = function(movie) {
alert("Movie :" + movie);
}
}
})();
这是 HTML:
<html>
<head>
<title>Directive Practice</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-app="mePracticing">
<h1>HEADER</h1>
<div ng-controller="practiceController">
<practice-directive movie="movie" display="display(movie)" rating="{{rating}}"></practice-directive>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="app.js"></script>
<script src="myDirective.js"></script>
</body>
</html>
app.js 只是我创建模块的一行:
angular.module('mePracticing', []);
如果有人能给我任何关于“&”为什么不起作用的提示，我将不胜感激。谢谢!
编辑:我为它制作了一个 JSFiddle:https://jsfiddle.net/hozxz5n4/
最佳答案
发生这种情况是因为当您使用指令时没有名为“display”的函数，您需要传递声明的函数:
<practice-directive movie="movie" display="displayMovie(movie)" rating="{{rating}}"></practice-directive>
最后在指令中调用 display prop 函数:
(function() {
'use strict';
angular
.module('mePracticing')
.directive('practiceDirective', practiceDirective);
function practiceDirective() {
var directive = {
restrict: 'AE',
scope: {
movie: '=',
rating: '@',
display: '&'
},
template: '<div>Movie: {{movie}}</div>' +
"Enter a movie: <input type ='text' ng-model='movie'>" +
"<div>Rating: {{rating}}</div>" +
"<div><button ng-click='display()'>CLICK ME</button></div>"
};
return directive;
}
})();
关于javascript - 在基本 Angular Directive(指令)中定义隔离范围时无法获得 '&' 前缀，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45806706/