Angular ng-click event not directing from controller binding in Directive template

Question

我已經創建了一個簡單的指令來加載模板。模板內部是一個綁定到我想在ng-click上觸發的控制器中的函數。

的指令：

angular 
    .module('myApp') 
    .directive('someDirective', someDirective); 

function someDirective() { 
    var directive = { 
     templateUrl: 'app/components/some-directive/some-directive.html', 
     controller: 'MyCoolController', 
     controllerAs: 'vm', 
     restrict: 'A', 
    }; 

    return directive; 
} 

控制器：

angular 
    .module('myApp') 
    .controller('MyCoolController', MyCoolController); 

function MyCoolController() { 
    var vm = this; 

    function clickMe() { 
     alert('clicked!'); 
    } 

    cm.clickMe = clickMe; 

} 

模板：

<div my-cool-directive> 
    <a href="#" ng-click="vm.clickMe()">Click me</a> 
</div> 

我的問題是，當點擊a當ng-click事件不點火。

Answer 1

問題是我不瞭解指令如何繼承範圍。將scope: true添加到指令映射中可以更正我的用例的範圍。

angular 
    .module('myApp') 
    .directive('someDirective', someDirective); 

function someDirective() { 
    var directive = { 
     templateUrl: 'app/components/some-directive/some-directive.html', 
     controller: 'MyCoolController', 
     controllerAs: 'vm', 
     scope: true, // <-------- Gotcha! 
     restrict: 'A', 
    }; 

    return directive; 
} 

有3種不同類型的範圍的對指令：

1. Shared範圍
2. 繼承範圍
3. 隔離範圍

更多信息請參閱這篇文章：Understanding scopes in AngularJS custom Directives