direttiva personalizzato Angularjs ng clic non funziona

Question

ho creato una direttiva personalizzata in angularjs:

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

codice di direttiva:

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

per qualche ragione, ng clic doesen't grilletto.

Ho cercato su Internet e ho trovato che compile/link è la soluzione per questo problema, ma non riesco a trovare una soluzione funzionante.

non sto usando jQuery ..

Answer 1

Avrai bisogno di aggiungere una funzione link alla definizione direttiva per far funzionare tutto questo. Quindi, fondamentalmente,

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

E l'html:

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

Ed ecco il violino: http://jsfiddle.net/4otpd8ah/

Answer 2

usare sia collegamento come risposta da @Ashesh o semplicemente aggiungere portata. Se imposti l'ambito falso non avrai un ambito isolato e il clic funzionerà su direttiva.

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