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は、 内の と同じではありませctrlん<button ng-click="ctrl.toggle()">。

<div collapsible-menu>誤解は、の内容が指令の内容であると考えていることに起因していると思いますが、そうではありません。collapsible-menuページの残りの部分から完全に「分離」されています (原文のまま!)。

于 2015-11-03T08:30:14.550 に答える
0

私はディレクティブとスコープの継承の達人ではありませんが、あなたのディレクティブは実際には 1 つではなく、リンク機能がなく、タグに含まれるコードは実際にはテンプレートに含まれている必要があることに気付きました。ディレクティブ タグ内のコードの繰り返しは、ディレクティブがまったく役に立たないことの証明です。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 に答える