CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-directivetags
IUnknown
IUnknown

Reputation: 9809

Executing multiple directives on a DOM

There are 2 directives defined in a module in AngularJs1.3

I find that only 1 directive gets executed ,though the 2 directives work individually when the other is commented out.
There are no exceptions in the execution console.

directive

angular.module('studentDetailApp.directives',[]).directive('studentDirective', function () {
    return {
    template:'...',
    link: function ($scope, element, attrs) { console.log('student directive');}
    }
})
.directive('basicDirective', function () {
    return {
    restrict:'E',
    template:'custom directive: {{textToInsert}}',
    link:function ($scope, element, attrs) { console.log('Printing out custom template');}
    }
});

index.html

<html lang="en" ng-app="studentDetailApp">
<head>
    ....
</head>
<body>
    <div ng-controller="StudentController"> 
      <basic-directive/>
      <div student-directive></div>
    </div>
</body>
</html>

I find that the second directive works - while the first gets ignored.
What is the error?

Upvotes: 1

Views: 48

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

You need to close basic-directive element properly like <basic-directive></basic-directive>, element tags are not self closing in nature expect img, br, hr, etc. List of self closing tags

Markup

<div ng-controller="StudentController"> 
     <basic-directive></basic-directive>
  <div student-directive></div>
</div>

Upvotes: 2

Related Questions