CODEWITHSUNDEEP
angularjsangularjs-directive
user6015054
user6015054

Reputation:

AngularJS directive not called

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.

Upvotes: 2

Views: 981

Answers (3)

user6015054
user6015054

Reputation:

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.

Upvotes: 1

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41445

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

Upvotes: 1

DilumN
DilumN

Reputation: 2895

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;
                }
            };
    });

Upvotes: 1

Related Questions