AngularJS directive not called

Question

Hi guys I've created 2 directives, one for each object that I have, one is adminGroups, the other is adminProfiles. I have this problem, the 2nd directive is not called at all. This is the controller:

angular.module('Modulx').controller('AdminsController', ['$scope', 'AdminService'
    function ($scope, AdminService ) {

        $scope.hasLoad = false;
        $scope.groups= null;
        $scope.profiles = null;

        AdminService.getAdmins().then(function (response) {
            $scope.hasLoad = true;
            $scope.groups= response.data.Groups;
            $scope.profiles = response.data.Profiles;
        });
    }
]);

And i have this html section, where when data has been finished to load, i assume that both directives should be called

<section class="section admin-section" ng-if="hasLoad">
    <administrator-group data="groups" />

    <administrator-profile data="profiles " />
</section>

This is the directive structure they are the same, and the 2nd (which is not called) is just as this except that word "Group" has been replaced by "profile". This one works just fine.

angular.module('Modulex').directive('administratorGroup', [
    function () {
        return {
            restrict: 'E',
            scope: { data: '=groups' },
            templateUrl: '/Content/AngularApp/Admin/AdminGroups/Template.html',
            link: function (scope, element, attrs) { },
            controller: function ($scope) {
                $scope.data;
            }
        };
    }
]);

What is the problem? why is the 2nd directive ignored or not being called? Thank you.

The other directive

angular.module('Modulex').directive('administratorProfile', [
    function () {
        return {
            restrict: 'E',
            scope: { data: '=profiles' },
            templateUrl: '/Content/AngularApp/Admin/AdminProfiles/Template.html',
            link: function (scope, element, attrs) { },
            controller: function ($scope) {
                $scope.data;
            }
        };
    }
]);

If i exclude the group directive the profile directive will work just fine.

change administratorGroup to administratorProfile, or include other directive as well — Masoud Andalibi
– Masoud Andalibi, Commented Mar 13, 2017 at 8:51

Sachila Ranawaka · Accepted Answer · 2017-03-13 09:09:13Z

1

need to close your directive elements tags

change this

<administrator-group data="groups" />
<administrator-profile data="profiles " />

to this

<administrator-group data="groups"></administrator-group>
<administrator-profile data="profiles "></administrator-profile>

and change directive scope binding like this

this scope: { data: '=groups' } to this scope: { data: '=' }

Here's demo

edited Mar 13, 2017 at 9:09

answered Mar 13, 2017 at 9:02

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user6015054 Over a year ago

yes. i've just figure it out but with another very similar approach. cheers mate

DilumN · Accepted Answer · 2017-03-13 08:55:25Z

Try this way. The problem is with your directive implementation,

angular.module('Modulex').directive('administratorProfile',function(){
        return {
            restrict: 'E',
            scope: { data: '=profiles' },
            templateUrl: '/Content/AngularApp/Admin/AdminProfiles/Template.html',
            link: function (scope, element, attrs) { },
            controller: function ($scope) {
                $scope.data;
            }
        };
});


angular.module('Modulex').directive('administratorGroup',function(){
            return {
                restrict: 'E',
                scope: { data: '=groups' },
                templateUrl: '/Content/AngularApp/Admin/AdminGroups/Template.html',
                link: function (scope, element, attrs) { },
                controller: function ($scope) {
                    $scope.data;
                }
            };
    });

score 1 · Accepted Answer · 2017-07-18 12:31:23Z

1

The fix is as follows. In the main html template, the controller template, i've moved the 2 directives in 2 separate html elements

<section class="section admin-group-section" ng-if="hasLoad">
    <administrator-group groups="groups" />
 </section>
<section class="section admin-profile-section" ng-if="hasLoad">
    <administrator-profile profiles="profiles" />
</section>

though i don't quite understand what the problem would be to have 2 directives in same html element.

edited Jul 18, 2017 at 12:31

answered Mar 13, 2017 at 9:05

user6015054

Collectives™ on Stack Overflow

AngularJS directive not called

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related