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

您的代码存在一些问题，

（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 2

您在ng-click

上调用函数时缺少括号

ng-click="toggleList()"

同样在指令代码中，不要再次声明角度模块。如果您将从该模块中清除旧的注册组件。在将新组件注册到模块

时使用angular.module('moduleName')（将返回创建模块）

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 3

您已经给出了函数名称'toggleList'，但您没有调用该函数。当你按如下方式调用函数时它应该工作：

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

您在函数中缺少括号。

由于

为什么ng-click不能处理自定义指令模板？

3 个答案: