我在角度中使用$ modal，在创建模态并解除它的简单循环后，主控制器断开：
TypeError: object is not a function
at http://localhost:1337/bower_components/angular/angular.min.js:178:79
at f (http://localhost:1337/bower_components/angular/angular.min.js:195:177)
at h.$eval (http://localhost:1337/bower_components/angular/angular.min.js:113:32)
at h.$apply (http://localhost:1337/bower_components/angular/angular.min.js:113:310)
at HTMLAnchorElement.<anonymous> (http://localhost:1337/bower_components/angular/angular.min.js:195:229)
at http://localhost:1337/bower_components/angular/angular.min.js:31:225
at r (http://localhost:1337/bower_components/angular/angular.min.js:7:290)
at HTMLAnchorElement.c (http://localhost:1337/bower_components/angular/angular.min.js:31:207)
主控制器逻辑如下：
(function(){
var app = angular.module('butler-user', ['ui.bootstrap']);
app.controller('UserController', ['$http', '$log', '$state', '$modal', '$scope', 'UserStatusService', function($http, $log, $state, $modal, $scope, UserStatusService) {
var self = this;
self.flash = '';
self.users = [];
self.newUser = {};
self.editUser = {};
$http.get('/user')
.success(function(data, status, headers, config) {
self.users = data;
})
.error(function(data, status, headers, config){
console.log('error getting data from /user');
$log.error("Error in get from /user: '"+config+"'");
});
var CreateUserModalCtlr = function ($scope, $modalInstance, userForm) {
$scope.userForm = {};
$scope.submitted = false;
$scope.validateAndCreate = function () {
console.log('Entering validateAndCreate()');
$scope.submitted = true;
if ($scope.userForm.$valid) {
console.log('Creating user with:'+JSON.stringify(self.newUser));
$http.post('/register', self.newUser)
.success(function(data, status, headers, config) {
console.log('response from /register'+data+' status:'+status)
if (status == 200) {
self.newUser = {};
$scope.submitted = false;
$http.get('/user')
.success(function(data, status, headers, config) {
self.users = data;
})
.error(function(data, status, headers, config){
$log.error("Error in get from /user: '"+config+"'");
});
$modalInstance.close('closed');
} else {
self.flash = 'Error creating new user';
}
})
.error(function(data, status, headers, config) {
console.log('Error in /register:'+status);
$modalInstance.close('closed');
});
}
};
$scope.cancelModal = function () {
console.log('Entering cancelModal()');
$modalInstance.dismiss('cancel');
};
};
self.addUser = function () {
var modalInstance = $modal.open({
templateUrl: '/admin/partials/CreateUser.html',
controller: CreateUserModalCtlr,
scope: $scope,
resolve: {
userForm: function () {
return $scope.userForm;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
模态模板如下所示：
<div class="modal-header">
<h3>Create New User</h3>
</div>
<div class="modal-body">
<form name="userForm" novalidate>
<div class="form-group" ng-class="{ 'has-error' : userForm.firstName.$invalid && submitted }" >
<label>First Name</label>
<input name='firstName' class="form-control" type='text' ng-model='userCtlr.newUser.firstName' required ng-minlength=1>
<p ng-show="userForm.firstName.$invalid && submitted" class="help-block">First name is required.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : userForm.lastName.$invalid && submitted }">
<label>Last Name</label>
<input name='lastName' class="form-control" type='text' ng-model='userCtlr.newUser.lastName'required ng-minlength=1>
<p ng-show="userForm.lastName.$invalid && submitted" class="help-block">Last name is required.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
<label>Username</label>
<input type="email" name="username" class="form-control" ng-model="userCtlr.newUser.username">
<p ng-show="userForm.username.$invalid && submitted" class="help-block">Enter a valid email address.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : userForm.username2.$invalid && !userForm.username2.$pristine }">
<label>Confirm Username</label>
<input type="email" name="username2" class="form-control" ng-model="userCtlr.newUser.username2">
<p ng-show="userForm.username2.$invalid && !userForm.username2.$pristine && submitted" class="help-block">Enter a valid email address.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : userForm.password.$invalid && !userForm.password.$pristine }">
<label>Password</label>
<input type="password" name="password" class="form-control" ng-model="userCtlr.newUser.password" required ng-minlength=8>
<p ng-show="userForm.password.$error.minlength && submitted" class="help-block">Password is too short.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : userForm.password2.$invalid && !userForm.password2.$pristine }">
<label>Confirm Password</label>
<input type="password" name="password2" class="form-control" ng-model="userCtlr.newUser.password2" required ng-minlength=8>
<p ng-show="userForm.password2.$error.minlength && submitted" class="help-block">Password is too short.</p>
</div>
<br><br>
{{registerCtlr.flash}}
</div>
<div class="modal-footer">
<button type="button" class="btn"
data-ng-click="cancelModal());">Cancel</button>
<button class="btn btn-primary"
data-ng-click="validateAndCreate();">Create User</button>
</div>
主HTML页面如下：
<div clas='row' ng-controller='UserController as userCtlr'> <!-- Use bootstrap grid layout -->
<div class="col-md-8">
<table class='table table-striped'>
<thead>
<td>Email Address</td><td>First Name</td><td>Last Name</td>
</thead>
<tr ng-repeat='user in userCtlr.users'>
<td> <a ng-click='userCtlr.editUser(user)'>{{user.emailAddress}}</a></td>
<td> {{user.firstName}}</td>
<td> {{user.lastName}}</td>
</tr>
<tr>
</tr>
</table>
<form name='userForm' ng-submit='userCtlr.addUser()' novalidate>
<input type='submit' value='createNewUser'/>
</form>
</div>
</div>
我是$ modal（和一般的Angular）的新手。我怀疑以某种方式解雇模态是打破主控制器（或其变量），但我不太了解这一切是如何解决我做错了。
感谢任何帮助，
查理