0

他のすべてのケースで正常に機能する次のディレクティブがあります。

.directive('breadcrumbs', function() {
    return {
        restrict: "E",
        replace: true,
        template: '<ul class="breadcrumb offset2" ng-show="breadcrumbs">'
                +'<li ng-repeat="crumb in breadcrumbs">'
                    +'<span ng-hide="crumb[1]">{{crumb[0]}}</span>'
                    +'<a ng-show="crumb[1]" href="#{{crumb[1]}}">{{crumb[0]}}</a>'
                    +'<span ng-show="crumb[1]" class="divider">/</span>'
                +'</li>'
            +'</ul>'
    }
}

「クラム」の配列を取り、各クラムは を保持する配列です。次に['title', 'href']例を示します。

$scope.breadcrumbs = [ ['Home', '/'], ['Projects', '/project'], ['Add', ''] ]

hrefが空の場合、ngShow/ngHideを組み合わせてリンクを非表示にし、テキストのみを出力します。

これが問題になるのは、たとえば、ブレッドクラムのコントローラーから $scope 変数を出力したい場合です。

var ProjectViewCtrl = function ($scope, $routeParams, Project) {
    $scope.project = Project.get({id: $routeParams.id})
    $scope.breadcrumbs = [ ['Home', '/'], ['Projects', '/project'], ['{{project.name}}', ''] ]
}

その意図は{{project.name}}、ブレッドクラムの最後の要素で出力され、Project.get完了すると、ブレッドクラムがコントローラー テンプレート内の他のすべてのものと共に更新されることです。残念ながらこれは起こらず、テキスト{{project.name}}はページに出力され、更新されることはありません。

別の方法として、成功のコールバックでブレッドクラムを設定することも知っていProject.getますが、それは実際には拘束力がなく、値を更新するだけなので、Angular を使用する主な理由の 1 つが無効になります :)

4

1 に答える 1

1

このフィドルhttp://jsfiddle.net/BJP3v/1/を参照してください。ng-bind動的プロジェクト名をビューにバインドするために使用されます。

次に、バインディングが機能しているかどうかをテストするためtestに、コントローラ スコープにメソッドが作成されます。ボタンを押している間、プロジェクト名が更新されます。$http呼び出しまたは$resource呼び出しのコールバック内にプロジェクト名の更新を入れてください

于 2013-04-06T20:07:44.197 に答える