Пользовательская директива 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 не срабатывает.

Я искал по Интернету и обнаружил, что компиляция / ссылка - это решение этой проблемы, но я не могу найти работающее решение.

Я не использую 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>

А вот и скрипка: http://jsfiddle.net/4otpd8ah/

Answer 2

Либо используйте ссылку в ответ на @Ashesh, либо просто добавьте область видимости. Если вы задаете область false, у вас не будет изолированной области действия, и щелчок будет работать с директивой.

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