AngularJS - Why is my directive/controller only loaded once?

Question

I have this directive:

App.directive('tablealerts', function(){
return {
    restrict: 'E',
    templateUrl: 'html/table_alerts.html',
    controller: 'tableController',
    replace: true,
    scope: {
        title: "@",
        memberId: "=",
        columns: "=",
        accessor: "=",
        export: "="
    },
    link : function(scope, element, attrs, controllers) {
        console.log(scope);
        console.log(element);
        console.log(attrs);
        console.log(controllers);
    }
};
});

And this is the controller:

App.controller('tableController',['$scope','$rootScope',function($scope,$rootScope) {
    console.log($scope.title);
}]);

Code is stripped for brevity, but if I now use the directive multiple times on an HTML like so:

    <tablealerts title="Alerts"
        columns="[{'label':'Date Time','value':'DateCreated'},
                  {'label':'Event','value':'EventName'},
                  {'label':'Device','value':'DeviceType'}]"
        accessor="tableAccessor" member-id="1">
     </tablealerts>
    <tablealerts title="Events" 
        columns="[{'label':'Date Time','value':'DateCreated'},
                  {'label':'Device','value':'DeviceType'}]" 
        accessor="tableAccessor" member-id="2">
    </tablealerts>

In the console I only see the title for one of the <tablealerts> and not both.

Here is my console output:

Events
Scope {$id: 45, $$childTail: null, $$childHead: null,
      $$prevSibling: null, $$nextSibling: null…}
[div.panel.panel-sky.ng-isolate-scope]
Attributes {$attr: Object, $$element: JQLite(1), title: "Events", 
        columns: "[{'label':'Date Time','value':'DateCreated'},
                   {'lab…ntName'},
                   {'label':'Device','value':'DeviceType'}]",
        accessor: "tableAccidentAccessor"…}
Object {}

What am I doing wrong?

This makes sense. You are setting `title` in the controller so when you `console.log` out of the controller it will show you whatever it currently has. I think you want to know the `title` value in the directive. Try putting `console.log($scope.title)` in the directive `link` function. — Jarek Kulikowski, Aug 01 '17 at 16:44
@JarekKulikowski But the controller I'm showing here is the controller assigned to the directive. Isn't that supposed to act as an internal scope? Anyway, I tried adding the log in the link function, and I have the same result. Only 1 output in the console... — Jan, Aug 01 '17 at 16:49
@JarekKulikowski i changed my question to include a link function with more console logging, and the output of the console — Jan, Aug 01 '17 at 16:52
It shouldn't be loaded once. It's possible that there is something in code 'stripped for brevity' that prevented first directive from being compiled. Please, provide http://stackoverflow.com/help/mcve that can replicate this. — Estus Flask, Aug 01 '17 at 16:57
Mmmm, shoot. I guess you are right. I just found out something. I tried putting them on an empty html and it is working fine. The problem I'm having is actually when trying to use this directive inside another directive... I'll see if I can replicate this with small but full code... Thanks @estus — Jan, Aug 01 '17 at 17:03
Glad if it helped. The problems solve themselves very often when you try to replicate them. — Estus Flask, Aug 01 '17 at 17:06
There are known, very silly problems with `replace: true`, a number of which can't really be fixed in a reasonable fashion. If you're careful and avoid these problems, then more power to you, but for the benefit of new users, it's easier to just tell them "this will give you a headache, don't do it". — georgeawg, Aug 01 '17 at 20:21
@georgeawg thanks for the tips, although there was no `ng-repeat` in place. And I saw the same behavior with `replace` being either `true` or `false` . So i'm not sure what it was marked as a duplicate of the one about replace being deprecated — Jan, Aug 02 '17 at 14:00

score 0 · Answer 1 · answered Aug 01 '17 at 17:09

You are getting correct title in directive. I don't see anything wrong with you code. It just be a matter of where to look. Please take a look at the snippet.

App = angular.module('myApp', []);

App.directive('tablealerts', function(){
return {
    restrict: 'E',
    template: '<div></div>',
    controller: 'tableController',
    replace: true,
    scope: {
        title: "@",
        memberId: "=",
        columns: "=",
        accessor: "=",
        export: "="
    },
    link : function(scope, element, attrs, controllers) {
        console.log(' DIR ');
        console.log(scope.title);
        //console.log(element);
        //console.log(attrs);
        //console.log(controllers);
        //console.log( attrs.title );
    }
};
});

App.controller('tableController',['$scope','$rootScope',function($scope,$rootScope) {
    //console.log($scope.title);
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="tableController">
    <tablealerts title="Alerts" columns="[{'label':'Date Time','value':'DateCreated'},{'label':'Event','value':'EventName'},{'label':'Device','value':'DeviceType'}]" accessor="tableAccessor" member-id="1"></tablealerts>
    <tablealerts title="Events" columns="[{'label':'Date Time','value':'DateCreated'},{'label':'Device','value':'DeviceType'}]" accessor="tableAccessor" member-id="2"></tablealerts>
</div>
</body>

score 0 · Answer 2 · answered Aug 01 '17 at 19:37

Completely random weird stuff. As you can tell by comments and the other answer, my original code seemed fine.

After pulling my hair for so many hours, I tried changing the directive template from templateUrl to straight template.

And that fixed everything.

Completely stupid. If anybody has an explanation for it, I'd love to hear it.

AngularJS - Why is my directive/controller only loaded once?

2 Answers2