我的指令设置如下:
angular.module("app", []).directive("myDirective", function(){
return {
scope: {},
link: function($scope){
$scope.myFunction = function(){
//Do DOM manipulation
}
}
}
});
在我的HTML中我只是
<div my-directive>
<a href="" ng-click="myFunction()">Click Me</a>
</div>
当我点击&#34;点击我&#34;没有什么打印到控制台,但是,如果我删除范围属性或将其更改为scope:true
然后它按预期工作。我知道这与隔离范围有关,但我不完全了解发生了什么。我希望有一个隔离范围,因为这将是一个模块化指令,我将在许多不同的项目中使用。
注意:我使用的是角1.4.6
更新 这个函数需要做DOM操作。这就是它在链接功能中的原因。
答案 0 :(得分:1)
这不起作用的原因是因为link
的使用方式。
由于元素存在于指令之前,因此不会使用link
中的信息编译这些元素。要获得您想要的内容,您需要将这些元素放在template
或templateUrl
中,以便可以针对link
进行编译。
以下是一个例子:
angular.module("myApp", []).directive("myDirective", function() {
return {
scope: {},
template: '<a href="" ng-click="myFunction()">Click Me {{value}}</a>',
link: function(scope) {
scope.value = 'Value here';
scope.myFunction = function() {
console.log('you are here.');
}
}
}
});
<script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<div ng-app="myApp">
<div my-directive>
<a href="" ng-click="myFunction()">Click Me {{value}}</a>
</div>
</div>
答案 1 :(得分:0)
将您的函数放在指令的控制器中。
如果您声明$scope
controllerAs
JS:
angular.module("app", []).directive("myDirective", function(){
return {
restrict:'E',
scope: {},
template:'<div><a href="" ng-click="MyCtrl.myFunction()">Click Me</a></div>',
controllerAs:'MyCtrl',
controller: function(){
this.myFunction = function(){
alert('okok');
}
},
link: function(scope, element, attrs){
}
}
});
HTML:
<body>
<my-directive> </my-directive>
</body>