2

鉴于以下示例，我很好奇为什么 scope:true按预期工作来切换元素。但是，如果scope:{}使用，则不会调用 toggle 方法ng-click。通过我自己的实验，是否使用 bindToController 和 controllerAs 都没有区别，问题是一样的。

(function(angular) {
  'use strict';
  angular.module('test', [])
  .directive('collapsibleMenu', [function() {
    return {
      scope: {}, // doesn't work
      //scope: true, // works
      restrict: 'A',
      controller: function() {
        var ctrl = this;
        ctrl.open = false;
        ctrl.toggle = function() {
          ctrl.open = !ctrl.open;
          console.log('toggle', ctrl.open);
        }
      },
      bindToController: true,
      controllerAs: 'ctrl'
    };
  }]);
})(window.angular);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
<div ng-app="test">
  <div collapsible-menu>
    <button ng-click="ctrl.toggle()">toggle menu 0</button>
    <ul role="menu" ng-show="ctrl.open" class="ng-cloak">
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
    </ul>
  </div>
  <div collapsible-menu>
    <button ng-click="ctrl.toggle()">toggle menu 1</button>
    <ul role="menu" ng-show="ctrl.open" class="ng-cloak">
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
    </ul>
  </div>
</div>

4

3 回答 3

3

它被称为 isolat(ed) 是有原因的。ctrl孤立范围内的in与ctrlin不同<button ng-click="ctrl.toggle()">。

我想误解源于您认为内容<div collapsible-menu>是指令的内容，但事实并非如此。collapsible-menu与页面的其余部分完全“隔离”（原文如此！）。

于 2015-11-03T08:30:14.550 回答
0

我不是指令和范围继承的大师，但让我印象深刻的是你的指令并不是真正的指令：它没有链接功能，并且标签中包含的代码应该真的在模板中。指令标签内代码的重复证明指令是无用的：您也可以直接在 HTML 本身中声明控制器。

于 2015-11-03T07:26:02.070 回答
0

你可以通过这种方式使用

HTML：

<div ng-app="test">
        <div collapsible-menu>
            <button ng-click="toggle()">toggle menu 0</button>
            <ul role="menu" ng-show="open" class="ng-cloak">
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
            </ul>
        </div>
        <div collapsible-menu>
            <button ng-click="toggle()">toggle menu 1</button>
            <ul role="menu" ng-show="open" class="ng-cloak">
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
            </ul>
        </div>
    </div>

JS：

angular.module("test", []).
directive("collapsibleMenu", function () {
    return {
        restrict: "A",
        transclude: true,
        scope: {},
        link: function (scope, element, attrs, ctrl, transclude) {

            transclude(scope, function (clone) {
                element.append(clone);
            });

            scope.open = false;
            scope.toggle = function () {
                scope.open = !scope.open;
                console.log('toggle', scope.open);
            };
        }
    };
});
于 2015-11-03T08:38:12.230 回答