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>

当我运行它并转到时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。

因此，Angular 为了自己的理解将“书名”转换为“书名”。

这是文档中的参考

于 2016-01-07T14:52:37.903 回答