공장을 통해 트리거 된 컨트롤러

나는 여전히 각도가있는 초보자입니다. 나는 전에 이와 비슷한 질문을했지만, 여기서 일하는 것과는 다른 이슈로 보입니다.공장을 통해 트리거 된 컨트롤러

두 개의 컨트롤러와 이들 사이에 정보를 공유하는 공장이 있습니다. ng = show를 사용하여 표시/숨기기 위해 두 개의 다른 컨트롤러를 사용하는 두 개의 별도 div가 있습니다.

모두 공장에 의해 공유 NG-쇼 같은 VAR,

JS 공장

app.factory('Srvc', function($rootScope) { 
    var Srvc = {}; 
     Srvc.var1; 
    return Srvc; 
});

JS 컨트롤러 그래서

app.controller('Ctrl1', function($scope, Srvc) { 
    $scope.var1 = false; 
    if (user interacts with html in div with ng-controller="Ctrl1") { 
     $scope.var1 = true; 
     Srve.var1 = $scope.var1; 
    } 
}); 

app.controller('Ctrl2', function($scope, Srvc) { 
    $scope.var1 = Srvc.var1; 
    if ($scope.var1 === true) { 
     update HTML in div with ng-controller="Ctrl2" 
     although I shouldn't need to do this really should I? 
    } 
});

에서를 사용

<div id=main> 
    <div ng-controller="Ctrl1"> 
    <div ng-show="var1">Hidden Stuff</div> 
    </div> 
    <div ng-controller="Ctrl2"> 
    <div ng-show="var1">More Hidden Stuff</div> 
    </div> 
</div>

HTML 내가 말할 수있는 것 공장 작동 확인, 데이터는 공장 Srvc.var1에 저장됩니다. 나는 데이터 trueSrvc.var1에 전달할 때 난 그냥 전화 $ 범위. $ 루트 작업을해야 내가 대신 서비스 #의 $ rootScope에 VAR1을 설정하는 생각 ng-show=true

출처

2014-09-02 myol

하나의 방법은, 상기 서비스 내부 객체 var1 래핑 후 모두 Ctrl1 및 Ctrl2 컨트롤러의 $scope 변수로서,이 오브젝트를 전달할 수있다.

DEMO

자바 스크립트

는

.factory('Svc', function() { 
    var service = { 
     data: {} 
    }; 

    // If you perform http requests or async procedures then set data.var1 here 
    service.data.var1 = true; 

    return service; 
    }) 

    .controller('Ctrl1', function($scope, Svc) { 
    $scope.data = Svc.data; 
    }) 

    .controller('Ctrl2', function($scope, Svc) { 
    $scope.data = Svc.data; 
    });

HTML

<div id="main"> 
    <div ng-controller="Ctrl1"> 
    <div ng-show="data.var1">Hidden Stuff</div> 
    <button type="button" ng-click="data.var1 = true">Set data.var1 to true</button> 
    <button type="button" ng-click="data.var1 = false">Set data.var1 to false</button> 
    </div> 
    <hr> 
    <div ng-controller="Ctrl2"> 
    <div ng-show="data.var1">More Hidden Stuff</div> 
    <button type="button" ng-click="data.var1 = true">Set data.var1 to true</button> 
    <button type="button" ng-click="data.var1 = false">Set data.var1 to false</button> 
    </div> 
</div>

출처

2014-09-02 16:15:28 ryeballar

와의 HTML을 '트리거'에 Ctrl2을 얻고 업데이트 할 수없는 것. var1을 업데이트 한 후 $ digest().

및보기에서 ng-show = $ root.Var1을 사용하십시오.

출처

2014-09-02 14:30:10

나는 읽었습니다 각진 상태의 글로벌 변수를 사용하면 예기치 않은 결과가 발생할 수 있습니다. 예를 수행하고 있는지 잘 모르는 경우 – myol

. 전역 변수가 업데이트 될 수 있기 때문입니다. –

myol이 아래에 뭔가를 게시했는데 작동 할 수 있습니다. –

컨트롤러 내에서 변경 서비스를 받으려면 $watch 서비스가 필요합니다.

원본 대답은 here입니다. 명시 적 감시자를 생성하지 않고이 문제를 해결하기

app.controller('Ctrl2', function($scope, Srvc) { 
    $scope.$watch(function() { 
     return Srvc.var1; 
    },      
     function(newVal, oldVal) { 
      $scope.var1 = newVal; 
    }, true); 
});

출처

2014-09-02 14:31:52 myol

공장을 통해 트리거 된 컨트롤러

답변

관련 문제