Question

我有自定义指令，在调用/完成路由时，模板中没有更新。以下是代码： 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>

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

请帮我解决这个问题。可能是我没有得到它，我在代码中遗漏了什么。提前谢谢。

Answer 1

将模板文件更改为

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

请注意，您要写bookTitle

而不是book-title

以下是一个示例：http://jsfiddle.net/jaimem/6wmKy/

Answer 2

更改＆＃34; bookTitle＆＃34;在HTML中的任何一个＆＃34; book-title＆＃34;或者＆＃34;书：标题＆＃34;或＆＃34; book_title＆＃34;。

HTML不是区分大小写，而是Angular。

所以即使你写了＃34; bookTitle＆＃34;在Angular代码中用HTML编写它与＆＃34; booktitle＆＃34;相同。

Angular规范化元素的标记和属性名称，以确定哪些元素与哪些指令匹配。规范化过程如下：

从元素/属性的前面剥离x-和数据。
将：， - 或_分隔的名称转换为camelCase。

所以＆＃34;书名＆＃34;转换为＆＃34; bookTitle＆＃34;由Angular自己理解。

以下是documentation

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

2 个答案: