AngularJS 앱을 함께 사용하지 않는 이유는 무엇입니까?

독립 실행 형 "CreateUser"위젯으로 빌드 한 AngularJS 앱이 하나 있습니다. 나는 현재 사용자의 테이블이 될 두 번째 위젯 "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 앱을 함께 사용하지 않는 이유는 무엇입니까?

답변

관련 문제