CODEWITHSUNDEEP
javascriptangularjs
bharath
bharath

Reputation: 885

Directives in angular js not working properly

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");
            }
          }
});

Upvotes: 0

Views: 242

Answers (3)

TheRodeo
TheRodeo

Reputation: 465

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.

Upvotes: 1

Seminda
Seminda

Reputation: 1773

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

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

Working demo

Upvotes: 0

Raghavendra
Raghavendra

Reputation: 5387

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

Upvotes: 1

Related Questions