爲什麼這些AngularJS應用程序不能一起運行？

我有一個成功運行的AngularJS應用程序，我構建爲獨立的「CreateUser」小部件。我正在創建第二個「ViewUsers」小部件，它將成爲當前用戶的表格（最終目標是將它們綁定在一起或根據用戶的頁面保持分開）。爲什麼這些AngularJS應用程序不能一起運行？

無論如何，我的第一個應用運行良好，但是當我放置第二個應用時，第二個應用將無法運行。即使是簡單的<input ng-model="test" />{{test}}也不行。

**編輯：看起來叫$scope.loadUsers();是造成錯誤。在這種情況下，我將如何調用加載函數在構造函數中運行？

這裏有一個小提琴和我的代碼：http://jsfiddle.net/YYcna/

HTML（減去HTML /頭）

<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'); 
    } 
}

來源

2013-12-24 Prodikl

你試圖調用它的定義之前的函數。這種類型的函數分配語法是不可能的。

試試這個：

/** 
* 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'); 
}

來源

2013-12-24 03:52:52

HAHAH感謝。我認爲它足夠聰明，可以通過文檔來了解我所指的功能在哪裏。我換了這個，它工作！謝謝，我會回來接受你的答案在幾分鐘內，當它允許我 – Prodikl

@Prodikl，很高興它幫助。 –

爲什麼這些AngularJS應用程序不能一起運行？

回答

相關問題