3

ルーティングが呼び出された/完了したときに、テンプレートで更新されないカスタム ディレクティブがあります。以下はコードです：module.js

    angular.module('bookApp', [])
       .config(['$routeProvider', function($routeProvider) {
           $routeProvider.when('/bookList', {
             templateUrl: 'bookList.html',
             controller: BookCntrl
            })
            .otherwise({ redirectTo: '/' });
           }
        ])
        .directive('bookDialog', function(){
             return {
                restrict: 'A',
                replace: true,
                transclude: true,
                scope: { title:'@bookTitle' },
                template: '<div>' +
                      '<div class="title">{{title}}</div>' +
                      '<div class="body" ng-transclude></div>' +
                      '</div>'};
        });
    function BookCntrl($scope) {
           //todo
    };

bookList.html に私は持っています

    <div book-dialog bookTitle="Computer Science">
        Description will come here
    </div>

これを実行して goto するとhttp://localhost:8080/bookApp/#/bookList。ディレクティブをレンダリング/検出せず、ng-view が更新されますが、カスタム ディレクティブは変更されずにそのまま残ります。

問題について私を助けてください。私はそれを取得していない可能性があります。ここでコードに欠けているものです。前もって感謝します。

4

2 に答える 2

3

テンプレートファイルを次のように変更します

<div book-dialog book-title="Computer Science">
    Description will come here
</div>

あなたの代わりにbookTitle書くことに注意してくださいbook-title

例を次に示します: http://jsfiddle.net/jaimem/6wmKy/

于 2012-12-13T05:34:31.973 に答える
1

HTML の「bookTitle」を「book-title」または「book:title」または「book_title」のいずれかに変更します。

HTML は大文字と小文字を区別しませんが、Angular は大文字と小文字を区別します。

したがって、Angular コードで「bookTitle」と記述しても、HTML で記述しても「booktitle」と同じ意味になります。

Angular は要素のタグと属性名を正規化し、どの要素がどのディレクティブに一致するかを判断します。正規化プロセスは次のとおりです。

  1. 要素/属性の先頭から x- と data- を取り除きます。
  2. :、-、または _ で区切られた名前を camelCase に変換します。

したがって、「book-title」は、Angular によって独自の理解のために「bookTitle」に変換されます。

ここにドキュメントからの参照があります

于 2016-01-07T14:52:37.903 に答える