La portée du contrôleur n'est pas transmise à la directive

Question

J'ai un html comme celui-ci :

    <div id="create-group" ng-controller="groupCreateController">
       <div id="container">
        <h1>Create group</h1>
        <div class="row">
            <div class="col-md-4"><input placeholder="Group Name.." ng-model="group.name"></div>
            <div class="col-md-8">
                <label>Group Description : </label>
                <textarea ng-model="group.description">     </textarea>
            </div>
        </div>
        <br/>
        <div class="row">

            <div class="col-sm-6">
                <usermgr-permission-list group="group"></usermgr-permission-list>
                <button type="button" class="btn btn-md btn-primary" ng-click="btnSave_click($event)">SAVE</button>

            </div>
             <div class="col-sm-6">
                <usermgr-user-list group="group"></usermgr-user-list>
            </div>
        </div>

    </div>
</div>

Mon contrôleur est :

(function (module) {
'use strict';

module.controller('groupCreateController', function ($scope, $rootScope, $routeParams, $location, userGroupService, $mdDialog) {

    $scope.group = [];
    $scope.init = function () {
    if ($routeParams.hasOwnProperty('id')) {
            //edit mode
            // $scope.trans.heading = 'Edit Release';
            // $scope.trans.saveBtn = 'Save';
            var id = parseInt($routeParams.id);
            getUserGroup(id);
        } else {
            $scope.group[0].id = 0;
            $scope.group[0].permissions = [];
            $scope.assignedPermissions = [];
            $scope.enrolledUsers = [];
            $scope.group[0].users = [];
            $scope.group[0].name = '';
            $scope.group[0].description = '';
        }
    };

    function getUserGroup(id) {
        userGroupService.getbyid(id).then(function (info) {

            if (info !== undefined && info.id === id) {
                $scope.group[0].id = info.id;
                $scope.group[0].name = info.name;
                $scope.group[0].description = info.description;
                console.log($scope.group);
                // $rootScope.$broadcast('rCube-user-mgt-users-list', info.id);
                // $rootScope.$broadcast('rCube-user-mgt-permissions-list', info.id);
            }
            else {

            }
        }).catch(function (exception) {
            console.error(exception);

        });
    }

    $scope.init();

});

})(angular.module('r-cube-user-mgt.user-group'));

J'ai deux directives personnalisées dans le premier bloc de code pour les autorisations d'utilisateur et les utilisateurs. La portée du groupe que je passe avec la directive ne contient pas les valeurs que j'ai mises dans la fonction getUserGroup(id). Le nom et la description du groupe s'affichent et le scope.group du contrôleur est rempli, mais ce n'est pas le cas une fois que je l'ai passé à mes directives. voici également le code des directives :

liste des autorisations :

 (function (module) {
    'use strict';
    module.directive('usermgrPermissionList', function () {
        return {
            restrict: 'E',
             scope:{
                 group: '='
            },
            controller: function ($scope, permissionService) {
                 $scope.updatedPermissions=[];
                console.log($scope.group); //it doesnt have the values from the controller ..
              if (!$scope.group.hasOwnProperty('permissions')) {
                    $scope.group.permissions = [];
                }

                function getData() {
                    console.log("inside getDAta for permission list" + $scope.group.id;

                    permissionService.getPermissionsFiltered($scope.group.id).then(function (info) {
                        if (info && info.length > 0) {
                            console.log(info);
                            $scope.group.permissions = info.map(function (a, index, array) {
                                return {
                                    id: a.id,
                                    name: a.name,
                                    description: a.description,
                                    assigned: a.assigned 
                                };  
                            }); 
                        } 
                    }).catch(function (exception) {
                        console.error(exception);

                    });
                } //end of getData()

                $scope.init = function () {
                    getData();
                };

                $scope.init();
            },
            templateUrl: 'r-cube-user-mgt/permission/list/list.tpl.html'
        };
    });
    })(angular.module('r-cube-user-mgt.permission'));

Quelqu'un peut-il m'aider ?

Answer 1

Vous ne pouvez pas assigner une propriété à un tableau comme ceci $scope.group.id = 0; soit faire $scope.group objet

$scope.group = {};

ou ajouter des propriétés à un index

 $scope.group = [];
  $scope.init = function () {
    if ($routeParams.hasOwnProperty('id')) {
            //edit mode
            // $scope.trans.heading = 'Edit Release';
            // $scope.trans.saveBtn = 'Save';
            var id = parseInt($routeParams.id);
            getUserGroup(id);
        } else {
            $scope.group[0].id = 0;
            $scope.group[0].permissions = [];
            $scope.assignedPermissions = [];
            $scope.enrolledUsers = [];
            $scope.group[0].users = [];
            $scope.group[0].name = '';
            $scope.group[0].description = '';
        }
 };

Answer 2

J'ai donc résolu le problème en ajoutant une diffusion pour envoyer l'identifiant au chargement de la directive. Cela a fonctionné !

Dans le contrôleur de groupe, j'ajoute la diffusion et j'envoie l'identifiant du groupe.

    function getUserGroup(id) {
                    userGroupService.getbyid(id).then(function (info) {

                        if (info !== undefined && info.id === id) {
                            $scope.group.id = info.id;
                            $scope.group.name = info.name;
                            $scope.group.description = info.description;
                            console.log($scope.group);                                                      
                     $rootScope.$broadcast(rCubeTopics.userMgtPermissionLoadData, $scope.group.id);
                        }

                    }).catch(function (exception) {
                        console.error(exception);

                    });
                }

et dans la directive de permission obtenir cette diffusion :

      $scope.$on(rCubeTopics.userMgtPermissionLoadData, function (event, id) {
                    console.log($scope.group.id);
                    getData();
                });