控制器未定义

Question

我正在尝试将AngularJS-UI模式使用到我的应用程序中，我对所在的地方有些困惑。我有一个针对称为模型的新组的按钮，模型控制器在另一个文件中。我正在尝试在GroupCtrl中调用NewGroupCtrl，但它正在返回未定义。

html用于新组按钮：

<button type="button" class="delGroupBtn" ng-click="newGroup()">New Group</button>

在我的groupctrl中，我有此newgroup()函数：

    $scope.newGroup = function (){
        var modalForm = '/Style%20Library/projects/spDash/app/partials/newGroup.html';
        var modalInstance = $modal.open({
            templateUrl: modalForm,
            backdrop: true,
            windowClass: 'modal',
            controller: newGroupCtrl,
            resolve:{
                newGroup:function (){
                    return  $scope.newGroup;
                }
            }
        });
    };

然后，我有了我的newgroup.html（模式），用户将输入组名称，描述，所有者：

<div class="modal-header">
    <form>
        <label for="groupName">Group Name:
            <input id="groupName" type="text" ng-model='newGroup.name'>
        </label>
        <hr>
        <label for="groupDesc">Group Description:
            <input id="groupDesc" type="text" ng-model='newGroup.desc'>
        </label>
        <hr>
        <label for="groupOwner">Group Name:
            <select id="groupOwner" type="text" ng-model=''></select>
        </label>
        <div class="modal-footer">
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
            <button class="btn primary-btn" type="button" ng-click="newGroup()">Create</button>
        </div>
    </form>
</div>

这是newgroupctrl：

spApp.controller('newGroupCtrl',
    function newGroupCtrl($scope, $modalInstance){
        $scope.newGroup = {
            name:null,
            desc:null
        };
        $scope.submit = function(){
            console.log('creating new group');
            console.log(newGroup);
            $modalInstance.dismiss('cancel');
        }
        $scope.cancel = function (){
            $modalInstance.dismiss('cancel');
        };
        $modalInstance.result.then(function (){
            groupService.newGroup($scope.newGroup);
        }, function (){
            console.log('No new group created.');
        });
    }
);

我已经为组和新组控制器注入了我的组服务，这是我试图将信息从模型中获取到组服务功能的地方，以使AJAX调用到我的服务器并创建新组。似乎我正在使用$型号在两个控制器中重复自己。

这是一个plunker

Answer 1

当控制器定义为角模块的一部分（使用.controller()方法）时，必须将其引用为字符串。

当控制器定义为简单的JS函数时，必须通过变量引用它。

在您的模态配置对象中，您将newGroupCtrl引用为变量，而不是字符串。

...
controller: newGroupCtrl,
...

vs

...
controller: 'newGroupCtrl',
...

但是您的控制器是用angular.module().controller()定义的：

spApp.controller('newGroupCtrl',
    function newGroupCtrl($scope, $modalInstance){...})

要修复，您需要将控制器的名称放在引号中或将控制器定义为简单的独立JS函数。

所以，要么是这样：

...
controller: 'newGroupCtrl',
...
spApp.controller('newGroupCtrl',
    function newGroupCtrl($scope, $modalInstance){...})

或以下：

...
controller: newGroupCtrl,
...
function newGroupCtrl($scope, $modalInstance){...}