4

$rootScope で $routeChangeError イベントをリッスンしてコンテンツを表示および表示するディレクティブを作成しています。

次のようにテンプレートをインライン化することで、すべてが機能するようになりました。

app.directive("alert", function ($rootScope) {
    'use strict';
    return {
        restrict: "E",
        replace: true,
        template: '<div class="alert alert-warning alert-dismissable" ng-show="isError">'
            + '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>'
            + '{{ message }}'
            + '</div>',
        //templateUrl: 'views/alert.html',
        link: function (scope) {
            $rootScope.$on("$routeChangeError", function (event, current, previous, rejection) {
                scope.isError = true;
                scope.message = rejection;
            });
        }
    };
});

ただし、テンプレートを templateUrl に置き換えると (例でコメントアウトしたように)、機能しません。テンプレートは読み込まれますが、バインドが機能していないようです。

コンソールにエラーはありません。

さまざまなディレクティブ設定を試してみましたが、うまく機能しませんでした。ngShow を要求する必要があるかもしれないと考えましたが、それを試みると $compile エラーが発生します。

Error: [$compile:ctreq] http://errors.angularjs.org/undefined/$compile/ctreq?    p0=ngShow&p1=ngShow
    at Error (<anonymous>)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:6:453
    at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:46:477)
    at S (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:49:341)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:55:213
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:66:72
    at C (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:91:121)
    at C (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:91:121)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:92:288
    at g.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:100:198) <div class="alert alert-warning alert-dismissable ng-binding" ng-show="{{isError}}">

スコープ設定を使用する必要があるのではないかと思いましたが、方法がわかりません。ドキュメントが少しわかりにくいことがわかりました。

私は正しい軌道に乗っていますか？

4

1 に答える 1

3

私はあなたが孤立したスコープを持つディレクティブについて話していると仮定しています。その場合、親スコープから派生したスコープ変数にアクセスできません。

一般に、templateUrl は $rootScope インジェクションを .directive に解釈できません。

Directives.directive('...', 関数($rootScope)

したがって、ビューで $rootScope 構文を使用することはできません。これは、代わりに template: '...' を使用する場合にのみ実行できます。このテクニックを習得するには、こちらを参照してください。

AngularJS は、ディレクティブ テンプレートで $rootScope 変数を評価します

ディレクティブ内で template: を使用する以外に、代わりに $rootScope をコントローラーに挿入し、ローカルの $scope 変数にビューで使用する値を登録することができます。コントローラー内では次のようになります。

$scope.headertype = $rootScope.currentHeaderType;

そこから、templateUrl ビュー内で headertype を使用できます。この手法の欠点は、リバース データ バインディングが失われることです。リバース データ バインディングが必要な場合は、「=」属性から変数を導出する必要があります。

plnkr = http://mle.mymiddleearth.com/files/2013/07/aint-nobody-got-time-for-that.png

于 2013-11-16T00:21:43.607 に答える