For studying angular js, I created an angular application for performing CRUD operation. I wanted to add modal form on my application. So when user click to add an item a modal form popups. For that I used angular ui of bootstrap. I tried to use the code http://plnkr.co/edit/dRahuG?p=preview which is in the ui bootstrap tutorial. It working fine in the plunker but not in application.
<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>
And my controller is
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;
}
}
});
};
}])
When I clicked the button the screen get darken but the modal form is not coming. I don't know where I gone wrong. I am using sails.js to load the server. Moreover I am beginner in angular js.
