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

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
– Jarek Kulikowski, Commented Aug 1, 2017 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
– Jan, Commented Aug 1, 2017 at 16:49
@JarekKulikowski i changed my question to include a link function with more console logging, and the output of the console — Jan
– Jan, Commented Aug 1, 2017 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 stackoverflow.com/help/mcve that can replicate this. — Estus Flask
– Estus Flask, Commented Aug 1, 2017 at 16:57

Jarek Kulikowski · Accepted Answer · 2017-08-01 17:09:17Z

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>

Jan · Accepted Answer · 2017-08-01 19:37:55Z

0

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.

answered Aug 1, 2017 at 19:37

Jan

2,5504 gold badges33 silver badges60 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related