템플릿에서 Angular service 객체에 액세스하는 방법은 무엇입니까?

Question

저는 두 개의 컨트롤러를 가지고 있습니다 : 하나는 메뉴 (추가/제거 할 수있는 요소의 동적 목록)이고 다른 하나는 ng-view입니다.

ng-view 컨트롤러에서 메뉴 요소에 액세스해야합니다. 그래서 제대로 이해 했으므로 모든 컨트롤러에서 메뉴 개체를 사용할 수 있도록 서비스를 만들어야합니다. 그냥 삽입해야합니다.

완료.

하지만!

렌더링 할 때 이러한 개체가 필요합니다. 그래서 두 컨트롤러의 범위에 메뉴 요소를 넣어야합니까? 추악합니다. 서비스중인 요소를 업데이트 할 때마다 값을 업데이트해야합니다. 조금도.

그래서 현재 rootscope 및 서비스와 함께 작동합니다.이 서비스는 요소 목록 update/add/remove AJAX를 처리하는 메소드를 가지고 있습니다. 하지만 여기서 뭔가 잘못되었다고 생각합니다.

조언이 있으십니까?

Answer 1

데이터가 모두 데이터이면 값을 사용할 수 있습니다. 각 컨트롤러에 Value를 삽입하고 범위에 저장 한 다음 템플릿의 Value 속성을 참조하십시오. 서비스를 사용한다면 똑같은 일을 거의 할 수 있습니다. 내 예제는 각각을 사용하는 하나의 솔루션을 보여줍니다.

이 예제를 참조하십시오 : 새 개체에 MyService.myData를 재 할당 할 경우주의해야 할 http://plnkr.co/edit/qTbSjnf6Q2FVDurGZhKd

<div ng-controller="MainCtrl"> 
    <input ng-model="mainVal.value"></input> 
    <input ng-model="mainSvcVal.value"></input> 
</div> 
<div ng-controller="OtherCtrl"> 
    <input ng-model="otherVal.value"></input> 
    <input ng-model="otherSvcVal.value"></input> 
</div> 

var app = angular.module('plunker', []); 

app.value('MyValue', {value: "Hello There"}); 

app.service('MyService', function() { 
    this.myData = { 
    value: "Goodbye" 
    } 
}); 

app.controller('MainCtrl', function($scope, MyValue, MyService) { 
    $scope.mainVal = MyValue; 
    $scope.mainSvcVal = MyService.myData; 
}); 

app.controller('OtherCtrl', function($scope, MyValue, MyService) { 
    $scope.otherVal = MyValue; 
    $scope.otherSvcVal = MyService.myData; 
}); 

한 가지는 것, 그것은 관계를 깰 것이다.