web-dev-qa-db-ja.com

ディレクティブスコープ引数を使用して、ディレクティブの親スコープで関数を呼び出す

テンプレートで定義されたクリックイベント（ng-click）に基づいてコンテンツの表示と非表示を切り替えるディレクティブを開発しています。ディレクティブが使用されている一部のビューでは、DOMの変更に対応できるように、ディレクティブのコンテンツが現在表示または非表示になっているかどうかを知りたいと思います。ディレクティブはスコープを分離しており、ディレクティブが「トグル」されたときに親スコープに通知しようとしています。私は、コールバック関数を使用するディレクティブにコールバック関数を渡すことでこれを達成しようとしています。

ディレクティブの状態（非表示または表示）がディレクティブの分離されたスコープに保存され、ng-クリック後に決定されるということを正しく実装する方法がわかりません。そのため、ビュー内からではなく、ディレクティブ内から親スコープの関数を呼び出す必要があります。

これにより、例でWAAYがより理にかなっています。以下は、私がやりたいことを示した縮図です。

http://plnkr.co/edit/hHwwxjssOKiphTSO1VIS?p=info

var app = angular.module('main-module',[])

app.controller('MainController', function($scope){
  $scope.myValue = 'test value';
  $scope.parentToggle = function(value){
    $scope.myValue = value;
  };
});

app.directive('toggle', function(){
    return {
            restrict: 'A',
            template: '<a ng-click="toggle();">Click Me</a>',
            replace: true,
            scope: {
                OnToggle: '&'
            },
            link: function($scope, elem, attrs, controller) {
                $scope.toggleValue = false;
                $scope.toggle = function () {
                    $scope.toggleValue = !$scope.toggleValue;
                    $scope.OnToggle($scope.toggleValue)
                };
            }
        };
});

私はAngularに比較的慣れていない。そもそもこれは悪い考えですか？関数参照を渡すのではなく、サービスまたは何かを使用する必要がありますか？

ありがとう！

javascriptangularjssingle-page-application
29
Nick

更新

_&_を使用して、ルートスコープの関数をバインドすることもできます（実際には_&_の目的です）。

そのためには、ディレクティブを少し変更する必要があります。

_app.directive('toggle', function(){
  return {
    restrict: 'A',
    template: '<a ng-click="f()">Click Me</a>',
    replace: true,
    scope: {
      toggle: '&'
    },
    controller: function($scope) {
      $scope.toggleValue = false;
      $scope.f = function() {
        $scope.toggleValue = !$scope.toggleValue;
        $scope.toggle({message: $scope.toggleValue});
      };
    }
  };
});
_

次のように使用できます。

_<div toggle="parentToggle(message)"></div>
_

Plunk

_=_を使用して関数をバインドできます。さらに、スコープとタグのプロパティ名が一致していることを確認してください（AngularJSはCamelCaseをdash notationに変換します）。

前：

_scope: {
  OnToggle: '&'
}
_

後：

_scope: {
  onToggle: '='
}
_

さらに、メインテンプレートでon-toggle="parentToggle({value: toggleValue})"を使用しないでください。関数を呼び出すのではなく、関数のpointerをディレクティブに渡すだけです。

Plunk

50
Sebastian