Directives in angular js not working properly

Question

I have two directives in my first22 module mycustomer1 and mycustomer. Problem is mycustomer directive is not called ? Can anyone explain me what i am doing wrong here?

Below is my html

        <!DOCTYPE html>
    <html  ng-app="first22">
        <head>
            <link rel="icon" type="image/png" href="globe/images/correct.png"/>
            <link rel="stylesheet" type="text/css" href="globe/css/style.css"/>     
            <script type="text/javascript" src="globe/script/jquery.js"></script>
            <script type="text/javascript" src="globe/script/angular.js"></script>
            <script type="text/javascript" src="globe/script/mainscope.js"></script>
            <script type="text/javascript" src="globe/script/angular-route.js"></script>

        </head>
        <body >

            <div id="maincontainer" ng-controller="nameListCtrl"> 
                <div id="header">

                    <div id="headtext">HTML5 SAMPLE</div>
                    <mycustomer/>
                    <mycustomer1/>
                </div>
                <div id="sidebar" >
                            <first-directive></first-directive>
                    <ul id="mainmenu" style="">
                        <li  ng-repeat="item1 in content"><a style="color:grey;" id="{{item1.title }}" class="asa" ng-click="show=!show" ng-model="checked" ng-href="#/{{item1.title }}">{{item1.title }}</a>
                           <ul ng-show="show "  ng-if="item1.subitems" style="text-align:left;margin-left:25px;">
                                <li ng-repeat="category in item1.subitems" >
                                    {{ category.title }}
                                </li>
                            </ul>

                        </li>
                    </ul>
                </div>
                <div id="content">
                    <div id="content_flow" ng-view="">
                    </div>
                </div>
                <div id="Interactive_content">
                <div id="Interactive_content_flow">
                    <div id="close">
                    </div>
                </div>
            </div>
            </div>


        </body>
    </html>

And my angular directive declaration below

var first2 = angular.module('first22', []);


first2.directive('mycustomer1',function()
{
    return{
        restrict:'E',
        replace: 'true',
        template:'<h1>aaaaaaaaaaaaaaaaaaaaaa</h1>',
        link: function()
        {
            alert("I'm working");
        }
    }
})


first2.directive('mycustomer', function() 
{
    return {
            restrict: "E",
            replace: 'true',
            template: '<h3>Hello World!!</h3>',
            link: function()
            {
                alert("I'm working 1");
            }
          }
});

You should replace your self-closing tags to regular open/close tags. Like <mycustomer></mycustomer>. On a sidenote, your replace value is now truthy instead of true. Just write true without the quotation marks. — René
– René, Commented Jul 14, 2014 at 6:55

Raghavendra · Accepted Answer · 2014-07-14 06:43:56Z

1

Directive names, when being declared should be in camelCase

first2.directive('myCustomer', function() { ... }

When using them in HTML elements, you must use hyphenated-lower-case

<my-customer></my-customer>

Working jsFiddle Demo

answered Jul 14, 2014 at 6:43

Raghavendra

5,4074 gold badges39 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

René Over a year ago

They should be, but not because it wouldn't work otherwise. They should because of naming conventions & readability.

TheRodeo · Accepted Answer · 2014-07-14 08:13:59Z

As Rene pointed out above, it is only a convention and it works without the camel case too. Raghav code works because he used empty closing tags like this "" and not ""

The issue is that "mycustomer" directive has replace clause in definitation and self-closing tags work only for a few some kinds of tags, browser doesn't close the "mycustomer" tag at all until the point it's parent, div in this case, closes so "mycustomer1" shows up inside the "mycustomer" tag so when "mycustomer" directive runs, it replaces it content which is now "mycustomer1" and hence "mycustomer1" doesn't actually run at all.

In essence, the code by OP really looks like below so when "mycustomer" runs, it removes "mycustomer1" from the HTML because of the "replace" in mycustomer's directive definition.

<div>
   <mycustomer>
      <mycustomer1></mycustomer>
   </mycustomer>
<div>

The reason Seminda's solution works is again that the individual "mycustomer" and "mycustomer1" are included in parent divs so they close right before the div close themselves.

For directives inside directive, checkout "transclude" property working with replace.

Seminda · Accepted Answer · 2014-07-14 07:00:46Z

0

Place your directive in the code like below. then it will work.

<div>
<mycustomer />
</div>
<div>
<mycustomer1 />
</div>

Working demo

edited Jul 14, 2014 at 7:00

answered Jul 14, 2014 at 6:55

Seminda

1,77312 silver badges16 bronze badges

Collectives™ on Stack Overflow

Directives in angular js not working properly

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related