Angularjs Tuỳ chỉnh Chỉ thị ng-click không làm việc

Question

tôi đã tạo ra một chỉ thị tùy chỉnh trong angularjs:

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

đang Chỉ thị của:

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

đối với một số lý do, ng-click doesen't cò.

Tôi đã tìm kiếm trên internet và thấy rằng biên dịch/liên kết là giải pháp cho vấn đề này, nhưng dường như tôi không thể đạt được giải pháp làm việc.

Tôi không sử dụng jquery ..

Answer 1

Bạn sẽ cần phải thêm một chức năng link định nghĩa chỉ thị để làm việc này. Vì vậy, về cơ bản,

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!'); 
     }; 
    } 
} 
}) 

Và html:

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

Và đây là fiddle: http://jsfiddle.net/4otpd8ah/ liên kết

Answer 2

Hoặc sử dụng như trả lời bằng cách @Ashesh hoặc chỉ đơn giản là thêm phạm vi. Nếu bạn đặt phạm vi sai, bạn sẽ không có phạm vi bị cô lập và nhấp chuột sẽ hoạt động trên chỉ thị.

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