Angularjs 为什么单击“不使用自定义指令模板”？

我想在我的项目中创建一个下拉过滤器。因此，我使用指令创建了下拉列表，其中列表包含模板中的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', [])
      .directive('dropDown', function() {
  return {
    restrict: 'E',
    templateUrl: 'drop.html'
    controller: drop
  }
});

我的指令模板文件

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

{{{items}

---

除ng click行为外，所有操作都正常。提前感谢。

您缺少调用函数的括号，请单击

ng

ng-click="toggleList()"

同样在指令代码中，不要再次声明角度模块。如果您确定它将从该模块中删除旧的已注册组件。将新组件注册到模块时，使用角度.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'  
}

---

您缺少用于调用函数的括号，请单击

ng

ng-click="toggleList()"

同样在指令代码中，不要再次声明角度模块。如果您确定它将从该模块中删除旧的已注册组件。将新组件注册到模块时，使用角度.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'  
}

---

您的代码几乎没有问题

（i） 您的指令不应具有具有空依赖项的新模块，请将其更改为

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

（ii）控制器内部指令后缺少逗号

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

（iii）应该是一个函数

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

---

您的代码几乎没有问题

（i） 您的指令不应具有具有空依赖项的新模块，请将其更改为

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

（ii）控制器内部指令后缺少逗号

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

（iii）应该是一个函数

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

您已经给出了函数名“toggleList”，但尚未调用该函数。当您按如下方式调用函数时，它应该工作：

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

选择

函数中缺少括号

谢谢
您提供了函数名“toggleList”，但尚未调用该函数。当您按如下方式调用函数时，它应该工作：

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

选择

函数中缺少括号

谢谢
在指令中，在分配控制器时使用单引号
控制器：“drop”
@SachilaRanawaka我不这么认为
drop
控制器应该在指令中使用。因为它已经在父控制器中使用。。或者我们应该使指令控制器代码特定于
下拉列表
指令代码。或者我们可以共享父控制器代码而不指定controller@PankajParkar是的，但是添加它不会是一个问题too@Sajeetharan我理解。我的观点是不必要的
drop
controller实例将被创建两次。我永远也不会prefer@PankajParkar在这种情况下，你是对的。但是，如果我们在其父控制器之外使用指令，那么我们需要添加它。在指令中，在分配控制器
控制器时使用单引号：“drop”
@SachilaRanawaka我认为不应该在指令内部使用
drop
控制器。因为它已经在父控制器中使用。。或者我们应该使指令控制器代码特定于
下拉列表
指令代码。或者我们可以共享父控制器代码而不指定controller@PankajParkar是的，但是添加它不会是一个问题too@Sajeetharan我理解。我的观点是不必要的
drop
controller实例将创建两次。我永远也不会prefer@PankajParkar在这种情况下，你是对的。但是如果我们在其父控制器之外使用该指令，那么我们需要添加它。