Javascript 无法使用ng click单击按钮_Javascript_Angularjs

Javascript 无法使用ng click单击按钮

javascript angularjs

Javascript 无法使用ng click单击按钮,javascript,angularjs,Javascript,Angularjs,当我运行这个plunker时，我按下下拉列表的向下箭头，我假设下拉列表现在会弹出，但它不会在我的浏览器控制台中，我没有错误为什么不能单击下拉列表 HTML </head> <body ng-controller="MainCtrl"> <div class="col-md-6"> <div class="btn-group" dropdown is-open="activeStep.schoolclassCodeCol

当我运行这个plunker时，我按下下拉列表的向下箭头，我假设下拉列表现在会弹出，但它不会

在我的浏览器控制台中，我没有错误

为什么不能单击下拉列表

HTML

  </head>

  <body ng-controller="MainCtrl">
    <div class="col-md-6">
      <div class="btn-group" dropdown is-open="activeStep.schoolclassCodeColorsIsOpen">
          <button type="button" ng-style="{{activeStep.selectedSchoolclassCodeColor}}"
                  class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
              {{activeStep.schoolclassCode()}} <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
              <li ng-repeat="color in activeStep.schoolclassCodeColors">
                  <a ng-style="{{color}}"
                     ng-click="activeStep.setSchoolclassCodeColor(color)">{{activeStep.schoolclassCode()}}</a>
              </li>
          </ul>
      </div>
  </div>
  </body>

</html>


{{activeStep.schoolclassCode（）}}


{{activeStep.schoolclassCode（）}}

这是普朗克

为了在

类

属性中使用

下拉切换

指令，您需要定义指令中的

限制

权限以包括

（Class）。例如：

.directive('dropdownToggle', function() {
  return {
    restrict: 'AEC',
    require: '?^dropdown',
    // ...
});

发件人：

“限制”选项通常设置为：

“A”-仅与属性名称匹配

“E”-仅与元素名称匹配

“C”-仅与类名匹配

对于您正在尝试执行的操作来说，这似乎是一大堆代码。我不知道下面的答案是否是你想要的。我假设您正在尝试创建一个仅角度版本的引导切换

似乎您误解了指令工作的

require

和

controller

属性。不幸的是，我认为角度文档可能是这种混乱的根源：

当指令需要控制器时，它接收该控制器作为其链接函数的第四个参数

它说该指令需要一个控制器，但实际上该指令需要另一个指令。所需指令的控制器被传递给链接函数

控制器属性不应该是字符串（

controller:'DropdownController'，

），而应该是控制器的构造函数。因此，我认为您可以通过将DropdownController移动到指令中来解决您的问题

对于类似（但更简单）的示例，您可以

为什么设置/使用原始源：不是AEC限制？？？可能是因为他们不希望我们在

类

属性中使用它（通常

类

用于样式，而不是“功能”）。默认值是

'EA'

（元素和属性），因此您应该能够在这两种模式下使用该指令。好的，问题是我使用的指令不是作者想要的！我现在已经把指令放在了a标签上，然后它就可以在没有AEC限制的情况下工作了！但是有一个视觉缺陷，现在指令在a标签上，右边的圆角消失了！

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
<script src="app.js"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

 <button type="button" ng-style="{{activeStep.selectedSchoolclassCodeColor}}"
              class="btn btn-primary dropdown-toggle" ng-disabled="disabled" data-toggle="dropdown">

.directive('dropdownToggle', function() {
  return {
    restrict: 'AEC',
    require: '?^dropdown',
    // ...
});