각도. 변경 사항에 대한 서비스보기

Question

클로저가있는 "DataService"이라는 서비스가 있습니다.
폐쇄 속성은 GET/설정/디스플레이 (ClosurePropertyName)를 통해 표시/설정/얻을 수 있습니다 :

var app = angular.module('app',[]); 
    app.service('DataService', [function(){ 
     var data = this; 
    (function initialize() { 
    var closure = { 
     prop: 'etc', 
     otherProp: [], 
     diffProp: { 
      a: 'b', 
      c: 'd' 
     } 
    }, keys = Object.keys(closure); 

    // ex: data.displayProp() 
    // returns : Displaying etc 
    data.displayProp = function() { 
     return 'Displaying: ' + closure.prop; 
    } 


    // ex: data.getProp() 
    // returns : etc 
    data.getProp = function() { 
     return closure.prop; 
    } 
    // ex: data.setProp("derp"); 
    // becomes: closure.prop = "derp" 
    data.setProp = function (val) { 
     closure.prop = val; 
    } 
    data.allProps = function() { 
     var obj = {}; 
     for (var i = 0; i < keys.length; i++) { 
      obj[keys[i]] = closure[keys[i]]; 
     } 
     return obj; 
    } 
    })(); 
}]); 

당신이이 서비스에 접근 컨트롤러 :

app.controller('CntrlA', ['$scope', 'DataService', function($scope, DataService){ 
    var props = DataService.allProps(); 
    this.props = props; 
    this.changeProp = function(val){ 
     DataService.setProp(val); 
    } 

    $scope.CntrlA = this; 
    return $scope.CntrlA; 
    }]); 

    app.controller('CntrlB', ['$scope', 'DataService', function($scope, DataService){ 
    var props = DataService.allProps(); 
     this.changeOtherProps = function(arr){ 
     DataService.setOtherProp(arr); 
    } 
    $scope.CntrlB = this; 
    return $scope.CntrlB 
    }]); 

그리고 간단한 HTML :

을

body[ng-app="app"] 

    div[ng-controller="CntrlA as aa"] 
    button[ng-click="aa.changeProp('herp a derp')"] 
    div "{{aa.props}}" 

    div[ng-controller="CntrlB as bb"] 
    button[ng-click="bb.setOtherProp(['all', 'the', 'things'])"] 
    div "{{bb.props}}" 

값이 변경되면 어떻게 적용 되나요? 나는 이것이 단순해야하지만 $ scope는 $ watch가 작동하지 않는다는 것을 안다.

Answer 1

가 사용 $watch이 경우 다음과 같이 보일 것입니다 :

$scope.$watch(function() { 
    return DataService.allProps(); 
    }, 
    function(newValue, oldValue) { 
    if (newValue === oldValue) return; 
    $scope.CntrlA.props = newValue; 
    }, true); 

allProps 이후 수익률 새로운 객체 참조 할 때마다, 당신은 세 번째 인수로 true을 통과해야합니다. 그렇지 않으면 "무한 $ 다이제스트 루프"오류가 발생합니다.

그러나이 경우 $watch을 사용하면 효과적이지 않습니다. 모든 다이제스트 루프는 다중 다이제스트 사이클을 포함하며, 각 사이클은 DataService.allProps()과 반복을 수행합니다. 그리고 true을 $watch에 세 번째 매개 변수로 전달해야하므로 내부적으로 angular.equals 및 angular.copy을 사용하게됩니다. 이는 훨씬 더 비싼 작업을 필요로합니다. $watch와

데모 (콘솔 프라하, 단) : http://plnkr.co/edit/DLmT5XAPBXA3dg5DENRS?p=preview

서비스가 대신 때마다 이벤트에게 속성 변경을 발사 할 것 같은 더 나은 솔루션을 볼 필요가있는 경우. 이렇게하면 다이제스트 사이클에 부담을주지 않습니다. 예를 들어

:

data.setProp = function(val) { 
    closure.prop = val; 
    $rootScope.$emit('DataService:update'); 
}; 

그리고 컨트롤러 : $와

var unregister = $rootScope.$on('DataService:update', function() { 
    $scope.CntrlA.props = DataService.allProps(); 
}); 

$scope.$on('$destroy', unregister); 

데모 방출 :http://plnkr.co/edit/QfdqGsLVXYnL4HIy82gk?p=preview