La directive AngularJS n'est pas appelée

Question

Bonjour, j'ai créé 2 directives, une pour chaque objet que j'ai, l'une est adminGroups, l'autre adminProfiles. J'ai ce problème, la deuxième directive n'est pas du tout appelée. Voici le contrôleur :

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

Et j'ai cette section html, où lorsque le chargement des données est terminé, je suppose que les deux directives doivent être appelées.

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

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

Voici la structure des directives : elles sont identiques, et la seconde (qui n'est pas appelée) est identique à celle-ci, sauf que le mot "Groupe" a été remplacé par "profil". Celle-ci fonctionne très bien.

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

Quel est le problème ? Pourquoi la deuxième directive est-elle ignorée ou n'est-elle pas appelée ? Merci.

L'autre 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;
            }
        };
    }
]);

Si j'exclue la directive de groupe, la directive de profil fonctionne parfaitement.

Answer 1

Essayez de cette façon. Le problème vient de l'implémentation de votre 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;
            }
        };
});

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

Answer 2

Vous devez fermer les balises de vos éléments de directive

changer ceci

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

à ce

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

et modifiez la liaison de la portée de la directive comme suit

ce scope: { data: '=groups' } à ce scope: { data: '=' }

Voici Démo

Answer 3

La solution est la suivante. Dans le modèle html principal, le modèle de contrôleur, j'ai déplacé les deux directives dans deux éléments html séparés.

<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>

Mais je ne comprends pas bien quel serait le problème d'avoir deux directives dans le même élément html.