0

ディレクティブで定義されたコントローラーからスコープ変数にアクセスする正しい方法は何ですか?

例として、クリック イベントで親ディレクティブのコントローラーの関数を呼び出したいとします。親ディレクティブでは、コントローラーが「定数」、FOO_VIEW、BAR_VIEW、BAM_VIEWにアクセスできるようにしたい

これらの定数を最上位のコントローラ、この場合は SearchCtrl (表示されていません) に配置する方が理にかなっていますか?

ディレクティブ:

.directive('usersAndApps', function() {
        return {
            restrict:'EA',
            scope: true,
            controller: function() {
                this.toggleView = function(viewName){
                    console.log('show view ' + viewName);
                }
            },
            link:function(scope, elem, attrs) {
                scope.FOO_VIEW = 'fooView';
                scope.BAR_VIEW = 'barView';
                scope.BAM_VIEW = 'bamView';
            }
        }
    }).directive('usersAndAppsNav', function() {
        return {
            restrict: 'AE',
            require:'^?usersAndApps',
            replace:true,
            scope:true,
            link:function(scope,elem,attrs,usersAndAppsCtrl){
                scope.toggleView = function(viewName){
                    usersAndAppsCtrl.toggleView(viewName);
                }
            },
            templateUrl:'partials/usersAndApps/throwmeaway'
        }
    });

テンプレート：

<div>
    <button class="btn btn-large btn-primary" ng-click="toggleView(FOO_VIEW)">Foo View</button>
    <button class="btn btn-large btn-primary" ng-click="toggleView(BAR_VIEW)">Bar View</button>
    <button class="btn btn-large btn-primary" ng-click="toggleView(BAM_VIEW)">Bam View</button>
</div>

ディレクティブとネストされた (子) ディレクティブ:

<div ng-controller="SearchCtrl">
    <users-and-apps>
        <users-and-apps-nav></users-and-apps-nav>
    </users-and-apps>
</div>
4

2 に答える 2

1

あなたが持っているものは問題ありませんが、で分離またはトランスクルードされたスコープを使用してusersAndAppsNavいないため、コントローラー API を定義する必要はありません。スコープで定義するusersAndAppsと、プロトタイプのスコープ継承を利用してメソッドにアクセスできtoggleViewParentます。に関連付けられていusersAndAppsます:

.directive('usersAndApps', function() {
return {
    restrict:'EA',
    scope: true,
    link:function(scope, elem, attrs) {
        scope.FOO_VIEW = 'fooView';
        ...
        scope.toggleViewParent = function(viewName){
            console.log('show view ' + viewName);
        }
    }
}
}).directive('usersAndAppsNav', function() {
return {
    restrict: 'AE',
    replace:true,
    scope:true,
    link:function(scope,elem,attrs) {
        scope.toggleView = function(viewName){
            scope.toggleViewParent(viewName);
        }
    },
   templateUrl: ...
}
});

Fiddle.

ここに画像の説明を入力

テンプレートに記述するとき、すでにプロトタイプの継承を利用していることに注意してng-click="toggleView(FOO_VIEW)"ください — FOO_VIEW が評価される唯一の理由fooViewは、プロトタイプの継承のためです —子スコープ (スコープ 005) が見つける (スコープ 004) にFOO_VIEW関連付けられたスコープで定義されます。usersAndApps継承チェーン/ルックアップを介して (つまり、破線をたどります)。

于 2013-05-30T21:59:05.703 に答える
-3

このトピックをカバーするこの簡単なビデオ チュートリアルをご覧ください @ http://www.egghead.io/video/LJmZaxuxlRc

彼はまた、そのサイトからリンクされた、本当に素晴らしい AngularJS チュートリアル ビデオを他にもたくさん持っています。

于 2013-05-30T18:37:48.300 に答える