Question

我有一个像这样的HTML：

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

我的控制器是：

(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'));

我在用户权限和用户的第一个代码块中有两个自定义指令。我使用该指令传递的组范围不包含我在getUserGroup（id）函数中放置的值。显示组名称和组描述，因此控制器中的scope.group已填充，但是一旦我将其传递给我的指令，情况并非如此。这里是指令代码：

权限列表：

 (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'));

任何人都可以帮忙吗？

Answer 1

你不能将属性分配给这样的数组$scope.group.id = 0; 要么$scope.group对象

$scope.group = {};

或向索引添加属性

 $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

所以我通过添加广播来解决这个问题，以便在指令加载时发送id。这有效！

在群组控制器中我添加广播并发送group.id

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

                    });
                }

并在权限指令中获取该广播：

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

来自控制器的范围不会传递给指令

2 个答案: