CODEWITHSUNDEEP
javascripthtmlangularjs
Alwin Doss
Alwin Doss

Reputation: 972

Using multiple AngularJS directives in one div tag

I am unable to use multiple directives in the same div tag. The following html does not display the product names that the module supplies

<!DOCTYPE html>
<html ng-app="gemStore">
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div ng-controller="StoreController as store" ng-repeat="pro in store.products">
            <h1>{{pro.name}}</h1>
        </div>
        <script src='scripts/angular.min.js'></script>
        <script type="text/javascript" src="scripts/app.js"></script>
    </body>
</html>

But if I add the ng-controller in a different div tag(see below) I am able to see the products. What is the reason behind this.

<!DOCTYPE html>
<html ng-app="gemStore">
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div ng-controller="StoreController as store" >
            <div ng-repeat="pro in store.products">
                <h1>{{pro.name}}</h1>
            </div>
        </div>
        <script src='scripts/angular.min.js'></script>
        <script type="text/javascript" src="scripts/app.js"></script>
    </body>
</html>

I did search about using multiple directives in a single div tag but was unsuccessful in finding any information. Is this a restriction imposed by AngularJS?

Following is the contents of app.js

(function() {
    var app = angular.module('gemStore', []);
    app.controller('StoreController', function() {
        this.products = gems;
    });

    var gems = [
        { name: 'Alwin', price: 200, description: "Checking my name" },
        { name: 'Alwin', price: 200, description: "Checking my name" },
        { name: 'Alwin', price: 200, description: "Checking my name" },
    ];


})();

Upvotes: 2

Views: 4538

Answers (4)

Michael Kang
Michael Kang

Reputation: 52847

Directives are compiled and linked in priority order with the higher priority directives executed before lower priority directives.

ng-controller has a priority of 0 and ng-repeat has a priority of 1000, so ng-repeat is compiled and linked first.

If both were compiled, this would not cause the issue. However, ng-repeat is also defined with a terminal attribute.

According to angular documentation:

terminal:

If set to true then the current priority will be the last set of 
directives which will execute (any directives at the current priority 
will still execute as the order of execution on same priority is undefined).

This means that once ng-repeat is compiled, no other directives with a lower priority (such as ng-controller) will be executed.

[EDIT]

Apparently, there is a discrepancy between the source code and documentation as to the correct priority of ng-controller. The code uses a priority of 500, but the documentation mentions it is defined with a priority of 0.

Upvotes: 1

Sergiu Paraschiv
Sergiu Paraschiv

Reputation: 10153

You can use multiple directives on the same DOM node. The issue you are running into is related to $compile priority and what ng-repeat does.

First of all you must understand that there's a clear algorithm that defines the way in which directives on the same DOM node are compiled. There's a priority parameter that defaults to 0. Directives are compiled based on this parameter, highest to lowest. ng-repeat has a priority of 1000 while ng-controller has a priority of 500. So ng-repeat is compiled first.

Second you need to know how ng-repeat works. If you read the sources you see that it uses the terminal parameter. That parameter tells AngularJS that it should not compile any directives with lower priorities.

Thus, in your code, ng-controller is never compiled ("executed").

Further, if ng-controller is not compiled then ng-repeat does not have a $scope to work on, the $digest loop won't have anything to do. You'd be tempted to think store is undefined, and so is store.products, but you'd be wrong. If that were the case you'd see a lot of "Trying to access property 'products' on undefined object 'store'", but you don't because the code in ng-repeat is never executed.

Upvotes: 6

M21B8
M21B8

Reputation: 1887

Putting multiple directives onto a div is not a problem. This is a snippet of code from an app of mine, using both ng-click and ng-class:

<a href="" class="listItems" ng-click="selectPost($index)" ng-class="{disabledLink: !post.available}">

Your problem is you did it with the Controller, I'm not sure exactly how the ng-controller directive works, but you were essentially declaring a different instance of the controller, for each row in a list from the first controller. How this didn't end up in some crazy infinite loop, I don't know. But essentially, don't declare your controller in an ng-repeat. unless your looping through a list of controllers!

Edit: Daniel has hit the route of the problem much better than I did. The ng-repeat creates a html element for each item in the list. However the controller hadn't been initialised, so the was no scope to get the list from, so there were no elements to draw, and no controllers got created. By putting the ng-controller 1 element further up, the list was created, and there was a scope, containing a list, which the ng-repeat could use to draw your items.

Upvotes: 1

Daniel
Daniel

Reputation: 3514

What you are trying to do is not possible. ng-repeat would normaly create several instance of the specific tag. In your example it would create several divs, each one creating a seperate controller. I have no source for this, but I guess that $scope is only valid inbetween the controller tags. Therefore your ng-repeat argument does not point to you products list, but onto a higher scope. Due to the fact that there is no entry in this scope ng-repeat hast nothing to show.

Upvotes: 1

Related Questions