Question

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

＆＃13;

(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);

＆＃13;

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

＆＃13;

Answer 1

它被称为isolat（ed）是有原因的。隔离范围中的ctrl与ctrl中的<button ng-click="ctrl.toggle()">不同。

我猜这种误解源于你认为<div collapsible-menu>的内容是指令内容的事实，但事实并非如此。 collapsible-menu完全被隔离＆＃34; （原文如此！）来自页面的其他部分。

Answer 2

我不是指令和范围继承的主人，但令我印象深刻的是你的指令不是真的：它没有链接函数，标记中包含的代码应该真的在模板。指令标记内部代码的重复证明该指令是无用的：您也可以直接在HTML本身中声明控制器。

Answer 3

你可以这样使用

<强> 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);
            };
        }
    };
});

无法在Angular isolate-scope指令上调用方法

3 个答案: