0

非常に単純な構造のサンプルアプリがあります (ここで見ることができます: http://plnkr.co/edit/5VAqUQsqKFGoteahacR2?p=preview ): ファイル index.html にはテンプレート (app/templates/home.html) が含まれています。これには、ディレクティブのテンプレートが含まれます。

<div class="included" ng-include="'app/templates/outer-directive-2.html'"></div>

次のディレクティブが含まれます。

<p>This is the included file <b>app/templates/outer-directive-2.html</b></p>
<div inner2="context"></div>

param inner2の値は、contentsCtrl コントローラーで定義されている $scope.contents オブジェクトのキーです。

app.controller('contentsCtrl', function($scope,$rootScope){

    $scope.contents = {
        context: "Context for investigations here."
    }

});

このキーは、ディレクティブのスクリプト (app/scripts/directives/defaultDirective.js) でオブジェクト フィールドを抽出するために必要です。

app.directive('inner2', function(){
    return{
        restrict: 'A',
        replace: true,
        scope: {
            inner2: '@',
            contents: '&'
        },
        templateUrl: 'app/templates/inner-directive-2.html',
        controller: function($scope){
            $scope.getStuff = function(){
                console.log('$scope.inner2, $scope.contents', {
                    // returns the key "context"
                    '$scope.inner2':$scope.inner2,
                    // returns function (???)
                    '$scope.contents':$scope.contents,
                    // returns "undefined"
                    '$scope.context':$scope.contents[$scope.inner2]
                });
            }
        }
    };
});

最後に折りたたまれたディレクティブ (app/templates/inner-directive-2.html) の内容は非常に単純です。

<div class="included" title="{{inner2}}">
    <p>Hello, I am the inner directive 2</p>
    <span class="pseudolink" ng-click="getStuff()">Click me</span> and check console message!
</div>

つまり、getStuff() を呼び出して $scope.contents[object_key] を取得するという考え方です。しかし、$scope.contents を見ることはできません。分離されたスコープ パラメータ (上記参照) の内容を外側のスコープにバインドすることで実現できるのではないかと考えました。

scope: {
    ....
    contents: '&'
},

...しかし、スコープ オブジェクトは返さず、代わりに関数を返します。おそらくここで何かが間違っています。質問は: 1. なぜ機能し、どこから来るのか? 2. 何らかの方法で $scope.contents を取得できますか?

http://plnkr.co/edit/5VAqUQsqKFGoteahacR2?p=preview

4

2 に答える 2

0

angular`s docsによると：

& または &attr - 親スコープのコンテキストで式を実行する方法を提供します。属性名が指定されていない場合、属性名はローカル名と同じであると見なされます。分離スコープ定義 scope: { localFn:'&myAttr' } を指定すると、分離スコープ プロパティ localFn は、count = count + value 式の関数ラッパーを指します。多くの場合、式を介して分離されたスコープから親スコープにデータを渡すことが望ましいです。これは、ローカル変数の名前と値のマップを式ラッパー fn に渡すことで実行できます。たとえば、式が increment(amount) の場合、localFn を localFn({amount: 22}) として呼び出して金額の値を指定できます。

したがって、ディレクティブの scope.contents はラッパー関数になります。コンテンツ オブジェクトをディレクティブ スコープに渡すか、doStuff を変更して親スコープのコンテキストで実行する必要があります。

ドキュメントのように (increment(amount) の例を見てください)、doStuff は親スコープにある必要があります。そして、ディレクティブからロケール変数を渡すことができます

于 2016-02-28T13:07:25.437 に答える
0

すでにスコープの内容を取得しています。404 に設定されているのではなく、ホームへのデフォルト ルートを定義していないだけです。更新された plunker を確認してください - http://plnkr.co/edit/BlXBqK?p=preview

他に何かお探しの場合はお知らせください。

app.config(function($stateProvider, $urlRouterProvider){

    $urlRouterProvider.otherwise("/home");

    $stateProvider
        .state('home',{
            url: "/home",
            templateUrl: 'app/templates/home.html'
        })
        .state('error',{
            url: "/404",
            templateUrl: "app/templates/404.html"
        });
});
于 2016-02-28T15:00:29.080 に答える