アプリケーションで 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({}) を使用して、両方のコントローラーで自分自身を繰り返しているようです
ここにプランカーがあります