Angularjs自定义指令ng-click不起作用

时间:2014-12-12 09:52:29

标签: angularjs

我在angularjs中创建了一个自定义指令:

directives.directive('myTop',function($compile) {
return {
    restrict: 'E',
    templateUrl: 'views/header.html',
}
})

指令代码:

<div class="my-header">
<button ng-click="alert('x')" class="fa fa-chevron-left"></button>
<h1>SpeakZ</h1>
</div>

由于某种原因,ng-click doesen触发。

我在互联网上搜索,发现编译/链接是这个问题的解决方案, 但我似乎无法达成有效的解决方案。

我没有使用jquery ..

2 个答案:

答案 0 :(得分:13)

您需要在指令定义中添加link函数才能使其生效。所以基本上,

var app = angular.module("myApp", [])

app.directive('myTop',function() {
return {
    restrict: 'E',
    template: '<button ng-click="clickFunc()">CLICK</button>',
    link: function (scope) {
        scope.clickFunc = function () {
            alert('Hello, world!');
        };
    }
}
})

和html:

<div ng-app="myApp">
    <my-top></my-top>
</div>

这是小提琴:http://jsfiddle.net/4otpd8ah/

答案 1 :(得分:1)

使用@Ashesh回答的链接或只是添加范围。如果设置范围为false,则不会有隔离范围,单击将对指令起作用。

directives.directive('myTop',function($compile) {
return {
   restrict: 'EA',
   scope: false,
   templateUrl: 'views/header.html',
  }
})