Angular JS 컨트롤러 범위, 다중보기

대시 보드 유형 프로젝트 (한 페이지, 여러 모델의 여러 작은보기)에 대해 다른 도구 인 각도 프레임 워크를 사용하고 있습니다.Angular JS 컨트롤러 범위, 다중보기

문제는 다음과 같이 구성

내가 작업 항목 데이터를 검색을 담당하는 컨트롤러를 가지고있다. 현재 workitem 데이터는 bugamount와 backlogitems로 구성됩니다.
이 컨트롤러에는 범위 변수 (bugAmount 및 backLogItems) 업데이트를 담당하는 두 개의 함수가 있습니다.
뷰 역할을하는 두 개의 html 파일이 있습니다. 이것들은 기본 dashboard.html (기본적으로 무작위로)에 포함되어 있습니다.

문제는 내가보기에는 workItemController에 링크되는 컨트롤러 지시문이있는 공통 조상을 공유하지 않는다는 것입니다. 나는 그것을 할 수 있고 완벽하게 작동 할 것이지만 이것은 레이아웃 가능성을 심각하게 감소시킨다.

기본적으로 문제 : 두보기 모두 범위에 대한 액세스가 필요하기 때문에 각보기에 이제 ng-controller 특성이 있습니다. 이 방법은 작동하지 않으며보기 중 하나만 업데이트됩니다. 참고로

이 두 div가 페이지의 아무 곳이나 locatd 할 수 있어야한다, 그들의 공유 데이터에 액세스 할 수 있어야합니다 (이는 ontroller 공급) 지금까지 내가 생각했습니다

<div class="backLogView" ng-controller="WorkItemsController"> 
... 
        <tr data-ng-repeat="b in backLogItems"> 
         <td class="text-left">{{b.title}}</td> 
         <td class="text-left">{{b.status}}</td> 
         <td class="text-left">{{b.assignedTo}}</td> 
        </tr> 

... 
</div> 

<div class="bugAmountView" ng-controller="WorkItemsController"> 
... 
{{BugAmount}} 
... 
</div>

별도의보기 대신 ng-controller 지시어가 사용되는 상호 상위를 만듭니다. 이것은 옵션이지만 심하게 뷰의 배치를 줄입니다. (걱정스러운 것은 no입니다.)
컨트롤러에 $ rootscope를 사용하면 발행을 위해 현재 범위를 $ rootscope로 업데이트합니다. workitems .. 아마도 이것은 작동하지만 모든 컨트롤러가 다른 모든 컨트롤러 데이터에 도달 할 수 있음을 의미합니다. 그것은 잘 될 수 없어 것 중 하나

여전히 하나의 컨트롤러에 연결된 기능이 (예상대로)하지만 웹 페이지에서 그것의 데이터에 대한 뷰 (bugamount 및 백 로그)을 표시 할 수있는 좋은 방법이 있나요 공통 조상이없는 곳.

출처

2013-11-26 Edim

각 컨트롤러에 주입 할 수있는 서비스를 사용할 수 있습니다. 기본적으로 서비스는 싱글 톤이므로 해당 서비스에 포함 된 데이터는 컨트롤러에서 공유됩니다.

컨트롤러의 로컬 $ 범위에 할당 할 수도 있습니다.

var YourApp = angular.module['YourAppName']; 

YourApp.factory('YourServiceName', [function(){ 
    return { 
     var1: '', 
     var2: '', 
     var3: '' 
}]);

그래서 당신의 컨트롤러에서, 당신은 'YourServiceName'을 주입 할 수 있습니다. 속성에 데이터를 할당 할 수 있으며 서비스가 주입 된 다른 컨트롤러에서도 액세스 할 수 있습니다. $ scope에 추가하면 변경 사항이 사용자의 시각에 반영됩니다.

그래서, 'WorkItemsController'을 위해, 당신은 같은 것을 할 수 : 당신이 ServiceData.var1 등을 액세스 할 수 귀하의 의견에 따라서

YourApp.controller('WorkItemsController', ['$scope', 'YourServiceName', function($scope, YourServiceName){ 
    $scope.ServiceData = YourServiceName; 
}]);

을이 데이터는 서비스를 통해 다른 곳에서 업데이트되는 경우, 자동으로 반영해야한다 너의 견해.

이렇게하면 공유 부모가 있거나 $ rootscope를 사용하지 않고도 범위간에 데이터를 공유 할 수 있습니다.

서비스를 사용하면 원래 데이터를 검색하는 기능을 서비스로 이동하고 함께 유지할 수도 있습니다. 데이터 검색은 컨트롤러에 의해 트리거 될 수 있지만 서비스에서 메소드 호출을 통해 뷰에서 액세스 할 수있는 자체 속성을 업데이트하는 서비스로 트리거 될 수 있습니다.

출처

2013-11-26 18:09:33 jpmcc

감사합니다. 나는 서비스에 대해 읽었고 당신의 설명은 내가 필요로하는 뒷자리에 밀었습니다. IT는 여전히 완벽하지는 않지만 모든 문제는 해결해야합니다. 같은 컨트롤러를 사용하는 두 개의 HTML 파일을 뷰로로드 할 수 있으며 싱글 톤 데이터 공급자로 사용되는 서비스를 통해 공유 데이터에 액세스합니다. – Edim

저는 여전히 앵귤러 (Angular) 주위에서 머리를 쓰고 있습니다. – jpmcc

다른 가능성이 있습니다. 동적으로보기를 새로 고치려면 서비스 응답에서보기를 수행하지 않습니다. $ emit/$ broadcast 이벤트를 사용하면 해당 데이터에 의존하는 모든보기를 새로 고칠 수 있습니다.

자세한 내용은 Working with $scope.$emit and $scope.$on을 확인하십시오.

출처

2016-03-01 16:17:46 Walfrat

Angular JS 컨트롤러 범위, 다중보기

답변

관련 문제