web-dev-qa-db-ja.com

親ディレクティブコントローラーを必要とするAngularJSディレクティブコントローラー？

私はこれについて完全に逆に考えているかもしれませんが、3つのネストされたディレクティブを作成しようとしています。それらを呼び出すことができます：画面、コンポーネント、およびウィジェット。ウィジェットがコンポーネントでいくつかの動作をトリガーできるようにしたいのですが、それにより画面でいくつかの動作がトリガーされます。そう：

.directive('screen', function() {
    return {
        scope: true,
        controller: function() {
            this.doSomethingScreeny = function() {
                alert("screeny!");
            }
        }
    }
})

.directive('component', function() {
    return {
        scope: true,
        controller: function() {
            this.componentFunction = function() {
                WHAT.doSomethingScreeny();
            }
        }
    }
})

.directive('widget', function() {
    return {
        scope: true,
        require: "^component",
        link: function(scope, element, attrs, componentCtrl) {
            scope.widgetIt = function() {
                componentCtrl.componentFunction();
            };
        }
    }
})

<div screen>
    <div component>
        <div widget>
            <button ng-click="widgetIt()">Woo Hoo</button>
        </div>
    </div>
</div>

require: "^component"を使用して、ウィジェットのリンクfnに親コンポーネントを要求することができますが、コンポーネントコントローラーが含まれる画面にさらにアクセスできるようにするにはどうすればよいですか？

必要なのはWHAT inコンポーネントなので、ウィジェットのボタンをクリックすると、「screeny！」という警告が表示されます。

ありがとう。

angularjsangularjs-directiveangularjs-scope
30
nicholas

問題を解決する方法は2つあります。

  1. scope: trueを使用しているため、すべてのスコープはプロトタイプを継承します。したがって、thisコントローラーのscreenではなく$scopeでメソッドを定義すると、componentとwidgetの両方にアクセスできます関数doSomethingScreeny。
    フィドル 。
  2. componentおよびrequire: '^screen'にリンク関数を定義します。リンク関数で、screenCtrlをスコーププロパティに保存すると、ディレクティブのコントローラーでアクセスできます（$scopeを挿入）。
    フィドル 。
36
Mark Rajcok

コントローラの作成時に親コントローラからプロパティまたはメソッドに直接アクセスしたい場合、これらのほとんどは失敗します。依存性注入と$controllerサービスを使用して、別のソリューションを見つけました。

.directive('screen', function ($controller) {
    return {
       require: '^parent',
       scope: {},
       link: function (scope, element, attr, controller) {
           $controller('MyCtrl', {
                $scope: scope,
                $element: element,
                $attr, attr, 
                controller: controller
           });
       }
    }
})

.controller('MyCtrl, function ($scope, $element, $attr, controller) {});

この方法はよりテストしやすく、不要なコントローラーでスコープを汚染することはありません。

5
malte
_var myApp = angular.module('myApp', [])

.directive('screen', function() {
  return {
    scope: true,
    controller: function() {
      this.doSomethingScreeny = function() {
        alert("screeny!");
      }
    }
  }
})

.directive('component', function() {
  return {
    scope: true,
    controller: function($element) {
      this.componentFunction = function() {
        $element.controller('screen').doSomethingScreeny();
      }
    }
  }
})

.directive('widget', function() {
  return {
    scope: true,
    controller: function($scope, $element) {
      $scope.widgetFunction = function() {
        $element.controller('component').componentFunction();
      }
    }
  }
})

.controller('MyCtrl', function($scope) {
  $scope.name = 'Superhero';
})_
_<body ng-app="myApp">

  <div ng-controller="MyCtrl">
    <div screen>
      <div component>
        <div widget>
          <button ng-click="widgetFunction()">Woo Hoo</button>
        </div>
      </div>
    </div>
  </div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>_

screenディレクティブコントローラーで定義された関数にcomponentからアクセスする場合ディレクティブコントローラー（リンク関数ではない）では、$element.controller('screen').doSomethingScreeny()（fromcomponentディレクティブ）を使用できます。

JSFiddle

角度 ドキュメント ：

  • controller(name)-現在の要素またはその親のコントローラーを取得します。デフォルトでは、ngControllerディレクティブに関連付けられたコントローラーを取得します。 nameがcamelCaseディレクティブ名として提供されている場合、このディレクティブのコントローラーが取得されます（例_'ngModel'_）。
0
Felix

return {scope：true}またはreturn {scope：false}はコントローラーの$ scope変数には影響しません：function（$ scope）{}各ディレクティブで、ディレクティブタグはng-controllerまたはng-appタグに配置する必要があります。

JSFiddle

JSFiddle

0
Lighthouse Nguyen