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

【问题标题】：Angularjs Custom Directive ng-click not workingAngularjs自定义指令ng-click不起作用
【发布时间】：2014-12-12 09:52:29
【问题描述】：

我在 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..

【问题讨论】：

警报在ng-click 内不起作用，而是在范围内搜索$scope.alert 函数
最初我尝试将：$location.path('/') inside ng-click.. dosen't work
即$location在$scope中不存在

标签： angularjs

【解决方案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/

【讨论】：

原生函数是什么意思？
最初我尝试将：$location.path('/') inside ng-click.. 不起作用
那行不通。您应该在指令的范围内定义一个函数（在其 scope.clickFunc 上方的情况下），该函数根据您的需要执行某些操作。 $location 也需要注入到指令中。
这对我有用，但我怎样才能附加一个已经在作用域中定义的函数？？

【解决方案2】：

要么使用@Ashesh 回答的链接，要么只是添加范围。如果您将范围设置为 false，您将没有隔离范围，并且单击将在指令上起作用。

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

【讨论】：