Angularjs：使用路由 - 不编译或不识别自定义指令

Question

I have custom directive which is not updating in the template when routing is called/done. Below is the code: 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
    };

in bookList.html i have

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

when I run this and goto http://localhost:8080/bookApp/#/bookList . It does not render/detect the directive and ng-view gets updated but custom directives remains as it is with no change.

Please help me on the issue. May be I am not getting it, what i missing here in the code. Thanks in advance.

Answer 1

Change your template file to

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

Notice that instead of bookTitle you would write book-title

Here's an example: http://jsfiddle.net/jaimem/6wmKy/

Answer 2

Change "bookTitle" in HTML to either of "book-title" or "book:title" or "book_title".

HTML is not case Sensitive but Angular is.

So even though you write "bookTitle" in Angular code writing it in HTML means same as "booktitle".

Angular normalizes an element's tag and attribute name to determine which elements match which directives. The normalization process is as follows:

1. Strip x- and data- from the front of the element/attributes.
2. Convert the :, -, or _-delimited name to camelCase.

So "book-title" gets converted to "bookTitle" by Angular for its own understanding.

Here is the reference from the documentation