CODEWITHSUNDEEP
javascriptangularjs
Manpal Singh
Manpal Singh

Reputation: 33

Angularjs: Using routing - the custom directive is not compiled or not recognized

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.

Upvotes: 3

Views: 2391

Answers (2)

tacticurv
tacticurv

Reputation: 518

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

Upvotes: 1

jaime
jaime

Reputation: 42031

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/

Upvotes: 3

Related Questions