控制器未定义

Question

我正在尝试将Angularjs-UI模式应用到我的应用程序中，而我对于其中的内容感到有点困惑。我有一个按钮用于调用模型的新组，模型控制器在另一个文件中。我试图在groupCtrl中调用newGroupCtrl但它返回undefined。

新组按钮的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.');
        });
    }
);

我已经使用我的组服务注入了group和newGroup控制器，我正在尝试从模型中获取信息到groupService函数，以便对我的服务器进行AJAX调用并创建新组。好像我在两个控制器中用$ model.open（{}）

重复自己

这是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){...}