동일한 페이지로 라우팅 된 여러 컨트롤러 AngularJS

Question

내 웹 사이트에서 AngularJS를 사용하려고하는데 다음과 같은 문제가 발생했습니다. 나는 그것을 다른 곳에서 보았지만 내 질문을 정말로 만족시키는 대답은 없다. 동일한 페이지에서 두 컨트롤러의 데이터에 액세스하려고 시도했지만 아무 것도 작동하지 않는 것 같습니다. 하나의 컨트롤러에서 데이터에 접근 할 수 있으며 다른 페이지의 데이터에 액세스 할 수 있지만 같은 페이지에서 동시에 액세스 할 수는 없습니다. 그들은 둘 다 동일한 앱을 통해 액세스하고 있습니다. 측면에서 포스트 클래스에 본질적으로 동일하다 직원이라는 다른 클래스가있다

'use strict'; 

castitApp.config(function ($routeProvider, $httpProvider, $translateProvider, USER_ROLES) { 
      $routeProvider 
       .when('/post/', { 
        templateUrl: 'views/posts.html', 
        controller: 'PostController', 
        resolve:{ 
         resolvedPost: ['Post', function (Post) { 
          return Post.query(); 
         }] 
        }, 
        access: { 
         authorizedRoles: [USER_ROLES.all] 
        } 
       }) 
      $routeProvider 
       .when('/views/main.html', { 
        templateUrl: '/views/main.html', 
        controller: 'PostController', 
        resolve:{ 
         resolvedPost: ['Post', function (Post) { 
          return Post.query(); 
         }] 
        }, 
        access: { 
         authorizedRoles: [USER_ROLES.all] 
        } 
       }) 
}); 

route_employee.js

castitApp.config(function ($routeProvider, $httpProvider, $translateProvider, USER_ROLES) { 
     $routeProvider 
      .when('/employees.html', { 
       templateUrl: '/employee-place.html', 
       controller: 'EmployeeController', 
       resolve:{ 
        resolvedEmployee: ['Employee', function (Employee) { 
         return Employee.get('stephen', 'name'); 
        }] 
       }, 
       access: { 
        authorizedRoles: [USER_ROLES.all] 
       } 
      }) 

     $routeProvider 
      .when('/', { 
       templateUrl: '/views/main.html', 
       controller: 'EmployeeController', 
       resolve:{ 
        resolvedEmployee: ['Employee', function (Employee) { 
         return Employee.get('stephen', 'name'); 
        }] 
       }, 
       access: { 
        authorizedRoles: [USER_ROLES.all] 
       } 
      }) 
    }); 

main.html

<tr ng-repeat="employee in employees"> 
    <td ng-click="get(employee.personnelNum, 'employeesof')"> 
{{employee.firstName}} {{employee.lastName}} 
    </td> 
</tr> 
</table></center> 
<li class="animate-repeat" ng-repeat="post in posts"> 
    {{post.text}} 
</li> 

: 여기

내 코드입니다 변경된 키워드로 어느 것이 작동하는지 자바 스크립트 파일에 대한 수입 순서를 변경하면 발견했습니다. 또한, 에서 이름을 변경하면 ('name'은 가명으로 작동하고 다른 하나는 작동하기 시작합니다.) 두 개의 컨트롤러를 사용할 수없는 것 같아요. 해결 방법이 될 수는 있지만 실제로 구현하는 방법은 매우 분명하지 않습니다.

Answer 1

결국 Gavin이 ng-controller에서 언급 한 것을 수행해야했지만, 잠시 동안 태그를 사용하여 내 컨트롤러에 액세스하는 데 문제가 있습니다. 올바른 방향 이었지만 특정 상황에서 작동하는 방법을 알지 못했습니다.

이제 라우터를 완전히 우회해야했습니다. 그들을 통해 물건을 실행하고 내가 할 수있는 한 routeprovider를 사용하여 두 개의 컨트롤러를 같은 URL로 라우팅하는 방법이 없습니다. 필자가 해왔 던 것처럼 해결 된 변수를 내 데이터에 전달하는 대신 내 Employee 객체에서 직접 서비스 쿼리를 호출합니다. 수정이 내가 수신 된 "알 수없는 공급자"오류를 해결 라우터의 주요 URL을 가리키는 코드를 제거하고

$scope.employees = resolvedEmployee; 

의 장소에

$scope.employees = Employee.get('stephen', 'name'); 

를 추가로 간단하게 거의이었다 때 ng - 컨트롤러를 사용하려고했습니다. 궁극적으로, 그것들은 진짜 문제로 밝혀졌습니다.

당신은 다음과 같이 구별하기 위해 경로 정의에 'controllerAs'를 사용할 수

Answer 2

:

castitApp.config(function ($routeProvider, $httpProvider, $translateProvider, USER_ROLES) { 
     $routeProvider 
      .when('/post/', { 
       templateUrl: 'views/posts.html', 
       controller: 'PostController', 
       controllerAs: 'viewPost', 
       resolve:{ 
        resolvedPost: ['Post', function (Post) { 
         return Post.query(); 
        }] 
       }, 
       access: { 
        authorizedRoles: [USER_ROLES.all] 
       } 
      }) 
     $routeProvider 
      .when('/views/main.html', { 
       templateUrl: '/views/main.html', 
       controller: 'PostController', 
       controllerAs: 'mainPost', 
       resolve:{ 
        resolvedPost: ['Post', function (Post) { 
         return Post.query(); 
        }] 
       }, 
       access: { 
        authorizedRoles: [USER_ROLES.all] 
       } 
      }) 
}); 

및 뷰 사용 {{mainPost.something}} 또는 {{viewPost.something}}에서

자세한 내용은 여기를 확인하십시오 https://docs.angularjs.org/api/ngRoute/provider/$routeProvider