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

Question

我在 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 不会触发。

我在网上搜索，发现 compile/link 是解决这个问题的方法，
但我似乎无法找到可行的解决方案。

我没有使用jquery..

Answer 1

您需要添加一个 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>

这是 fiddle : http://jsfiddle.net/4otpd8ah/