javascript - Angularjs:使用路由 - 自定义指令未编译或无法识别

Question

我有自定义指令，当调用/完成路由时，它不会在模板中更新。下面是代码:模块.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>

当我运行它并转到 http://localhost:8080/bookApp/#/bookList 时。它不呈现/检测指令，并且 ng-view 得到更新，但自定义指令保持原样，没有任何变化。

请帮我解决这个问题。可能是我不明白，我在代码中遗漏了什么。提前致谢。

Answer 1

将模板文件更改为

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

请注意，您将编写 book-title 而不是 bookTitle

这是一个例子:http://jsfiddle.net/jaimem/6wmKy/