为了研究角度js,我创建了一个用于执行CRUD操作的角度应用程序。我想在我的应用程序中添加模态表单。因此,当用户单击以添加项目弹出模式窗体时。为此,我使用了角度ui的bootstrap。我尝试使用ui bootstrap教程中的代码http://plnkr.co/edit/dRahuG?p=preview。它在plunker中工作正常但不适用。
<div class="container" ng-controller="ClassController">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<form ng-submit="submit()">
<div class="modal-body">
<label>User name</label>
<input type="text" ng-model="user.user" />
<label>Password</label>
<input type="password" ng-model="user.password" />
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>
<button class="btn" ng-click="open()">Add</button>
<div ng-show="selected">aSelection from a modal: {{ selected }}</div>
</div>
我的控制器是
var myApp = angular.module('myApp', ['ui.bootstrap']);
myApp.controller('ClassController',['$scope','$http','$modal','classFactory',function($scope,$http,$modal){
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
$modal.open({
templateUrl: 'myModalContent.html',
backdrop: true,
windowClass: 'modal',
controller: function ($scope, $modalInstance) {
$scope.submit = function () {
$modalInstance.dismiss('cancel');
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
items: function () {
return $scope.items;
}
}
});
};
}])
当我点击按钮时,屏幕会变暗但模态形式不会出现。我不知道我哪里出错了。我正在使用sails.js来加载服务器。而且我是角度js的初学者。