我有一个成功运行的 AngularJS 应用程序，我将其构建为独立的“CreateUser”小部件。我正在制作第二个小部件“ViewUsers”，它将是当前用户的表格(最终目标是根据用户所在的页面将它们联系在一起或分开)。
无论如何，我的第一个应用程序运行良好，但是当我放置第二个应用程序时，第二个应用程序无法运行。即使是一个简单的 <input ng-model="test" />{{test}}行不通。
**编辑:似乎调用$scope.loadUsers();导致错误。在这种情况下，我将如何在构造函数中调用一个加载函数来运行？
这是一个 fiddle 和我的代码:http://jsfiddle.net/YYcna/
HTML(减去 html/head)
<body ng-app>
<fieldset>
<legend>Create new user</legend>
<form ng-submit="createNewUser()" ng-controller="CreateUsers" enc-type="multipart/form-data" method="POST" action="">
<select ng-model="selectedType" ng-options="type as type for type in types" name="type"></select>
<input style="display:block;" ng-repeat="field in fields[selectedType]" type="text" name="{{field.value}}" ng-model="formData[field.value]" placeholder="{{field.name}}" />
<input type="submit" value="Create" />
</form>
</fieldset>
<fieldset>
<legend>All users</legend>
<div ng-controller="ViewUsers">
<input type="text" ng-model="test" />{{test}}
</div>
</fieldset>
</body>
JavaScript
/**
* User creation controller.
*
* @param {type} $scope
* @param {type} $http
* @returns {undefined}
*/
function CreateUsers($scope, $http, $rootScope){
$scope.selectedType = '';
$scope.formData = {};
$scope.method = 'POST';
$scope.url = '/users/createUser';
$scope.types = [
'Student',
'Parent',
'Teacher',
'Staff'
];
$scope.fields = {
User:[
{name: 'First Name', value: 'first_name'},
{name: 'Last Name', value: 'last_name'},
{name: 'Email', value: 'email'},
{name: 'Phone', value: 'phone'}
],
Employee:[
{name: 'Start Date', value:'start_date'},
{name: 'Branch', value:'branch'}
]
};
$scope.fields.Student = $scope.fields.User;
$scope.fields.Parent = $scope.fields.User;
$scope.fields.Employee = $scope.fields.User.concat($scope.fields.Employee);
$scope.fields.Teacher = $scope.fields.Employee;
$scope.fields.Staff = $scope.fields.Employee;
$scope.createNewUser = function(){
this.formData.type = this.selectedType;
console.log($scope);
console.log($scope.formData);
$http({
method: $scope.method,
url: $scope.url,
data: $scope.formData
}).success(function(data,status){
$scope.status = status;
$scope.data = data;
console.log($scope);
}).error(function(data,status){
$scope.data = data || 'Request failed';
$scope.status = status;
console.log($scope);
});
}
}
/**
* View users controller
*
* @param {type} $scope
* @returns {undefined}
*/
function ViewUsers($scope, $http){
$scope.users = [];
$scope.url = '/users/getUsers'
$scope.test = 'checken';
$scope.loadUsers();
console.log('loaded view users');
$scope.loadUsers = function(){
$http({
method: 'GET',
url: $scope.url
}).success(function(data, status){
$scope.status = status;
$scope.data = data;
console.log($scope.data);
}).error(function(data, status){
$scope.data = data || 'Request failed';
$scope.status = status;
console.log($scope.data);
});
console.log('attempted to get users');
}
}
最佳答案
您试图在函数定义之前调用该函数。这种类型的函数赋值语法是不可能的。
试试这个:
/**
* View users controller
*
* @param {type} $scope
* @returns {undefined}
*/
function ViewUsers($scope, $http){
$scope.users = [];
$scope.url = '/users/getUsers'
$scope.test = 'checken';
$scope.loadUsers = function(){
$http({
method: 'GET',
url: $scope.url
}).success(function(data, status){
$scope.status = status;
$scope.data = data;
console.log($scope.data);
}).error(function(data, status){
$scope.data = data || 'Request failed';
$scope.status = status;
console.log($scope.data);
});
console.log('attempted to get users');
};
$scope.loadUsers();
console.log('loaded view users');
}
关于javascript - 为什么这些 AngularJS 应用程序不能一起运行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20754547/