0

アプリケーションで Angularjs-UI Modal を使用しようとしていますが、何がどこにあるのか少し混乱しています。モデルを呼び出す新しいグループのボタンがあり、モデルコントローラーは別のファイルにあります。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.');
        });
    }
);

モデルから groupService 関数に情報を取得して、サーバーへの AJAX 呼び出しを行い、新しいグループを作成しようとしているグループ サービスに、グループ コントローラーと newGroup コントローラーを挿入しました。$model.open({}) を使用して、両方のコントローラーで自分自身を繰り返しているようです

ここにプランカーがあります

4

1 に答える 1