0

我正在尝试在我的应用程序中使用 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>

这是新的GroupCtrl：

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({}) 的两个控制器中重复自己

这是一个笨蛋

4

1 回答 1

0

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

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

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

...
controller: newGroupCtrl,
...

对比

...
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){...}
于 2014-02-03T08:10:48.003 回答