为什么 ng-click 在自定义指令模板上不起作用？

Question

我想在我的项目中创建一个下拉过滤器。因此，我使用指令创建了下拉列表，其中列表在模板中包含 ng-click 事件。我不知道我哪里错了。请提供解决方案。提前致谢。

我的 HTML 文件

<div ng-controller="drop">
 <a ng-click="toggleList">Select</a>

 <div ng-if="toggleDrop">
 <drop-down></drop-down>
 </div>
</div>

我的控制器代码

angular.module('myApp', [])
  .controller('drop', ['$scope', function($scope){
     $scope.toggleDrop = false;
     $scope.filterList = ['One','Two','Three'];
     $scope.toggleList = function() {
           $scope.toggleDrop = !$scope.toggleDrop;
     }

     $scope.filterContent = function() {
          alert('dfdf')
     }

}]);

我的指令代码

angular.module('myApp', [])
      .directive('dropDown', function() {
  return {
    restrict: 'E',
    templateUrl: 'drop.html'
    controller: drop
  }
});

我的指令模板文件

<ul>
    <li ng-repeat="items in filterList" ng-click="filterContent()">{{items}}</li>
</ul>

除了 ng-click 行为外，一切正常。提前致谢。

Answer 1

您缺少括号来调用 ng-click

上的函数

ng-click="toggleList()"

另外，在指令代码中不要再次声明 angular 模块。如果您这样做，它将从该模块中清除旧的注册组件。在向模块

注册新组件时使用 angular.module('moduleName')（这将 return 创建模块）

angular.module('myApp', [])

应该是

//module getter
angular.module('myApp')

另外指令有误DDO，更正如下

return {
    restrict: 'E',
    templateUrl: 'drop.html', //added `,` here
    //I don't think so you need controller here as you shared the parent controller
    //wrap with `'` but it will create `drop` controller instance inside directive again
    //controller: 'drop'  
}

Answer 2

您的代码几乎没有问题，

(i) 你的指令不应该有一个空依赖的新模块，把它改成，

angular.module('myApp')
      .directive('dropDown', function()

(ii) 控制器内部指令后缺少逗号，

angular.module('myApp')
      .directive('dropDown', function() {
  return {
    restrict: 'E',
    templateUrl: 'drop.html',
    controller: 'drop'
  }
});

(iii)应该是toggleList()这是一个函数，

 <a ng-click="toggleList()">Select</a>

DEMO

Answer 3

您已提供函数名称 'toggleList' 但您尚未调用该函数。当您按如下方式调用该函数时，它应该可以工作：

 <a ng-click="toggleList()">Select</a>

函数中缺少括号。

谢谢

为什么 ng-click 在自定义指令模板上不起作用？

Why ng-click not working on custom directive template?

angularjs

angularjs-directive

angularjs-controller