Angularjs : 컨트롤러간에 관찰 가능한 데이터 공유

Question

서버 컨트롤러에서 datacontext를 사용해야합니다.
datacontext는 여러 가지 방법으로 변경할 수 있습니다 (ajax 호출, 사용자 /보기, 서버 별).
datacontext의 데이터가 변경되면 datacontext를 사용하는 모든 컨트롤러에 통보해야합니다.

데이터 컨텍스트는 :

var userDataContext = { firstName: "John", lastName: "Doe" }; 

나는 여기

setTimeout(function() { 
    console.log("change firstname"); 
    userContext.firstName= "Bart"; 
}, 3000); 

---

에서는 setTimeout
로 모든 예에서 백엔드 변화를 시뮬레이션 잘 작동 녹아웃,의 바이올린 예이다.
http://jsfiddle.net/8ct0L1zu/4/

---

또한 각도 함께하려고 노력하지만, 부분적으로 작동합니다.

• 전체 개체를 컨트롤러로 전달하면 (참조 기준) 컨트롤러간에 변경이 이루어집니다.
  javacript/backend에서 datacontext를 변경하면 내보기가 변경되지 않습니다.
  

• 나는 완전한 개체가 아닌 컨트롤 범위에 firstname과 lastname 만있는 것을 선호합니다.
  하지만이 경우 아무것도 작동하지 않습니다.
  이유 : 우리 응용 프로그램에는 큰 개체 배열을 가진 많은 datacontext가있을 것입니다.

  http://jsfiddle.net/19xv3skn/1/

  녹아웃와 각도

  ---

  정말 그것이 작동되도록하려면 , 내가 사용

. datacontext에 대한 데이터 바인딩 및 녹아웃을위한 각도. 이 잘 작동하지만 정말이 솔루션을 좋아하지 않아.
http://jsfiddle.net/7chp5xLa/2/

---

각도에서 관찰 할 수있는 데이터 컨텍스트로 작업하는 것이 좋습니다 또는 더 좋은 방법이 있나요?

Answer 1

내 생각에이 문제는 AngularJS 앱에서 데이터를 관리하는 방법이라고 생각합니다. AngularJS 라이프 사이클 외부에서 userContext 데이터를 편집하고 있습니다. AngularJS가 보는 것을 관리하는 대신, AngularJS에 제공 한 후에 데이터를 편집합니다.대신, 각도 내에서 userContext 상태를 원하는 위치에서 변경하는 것을 고려하십시오.

예를 들어, $ scope에 동일한 데이터를 가진 두 개의 컨트롤러가 있습니다. 데이터를 관리하는 공통 상위 컨트롤러를 참조해야합니다. 대신 $의 범위에 대한 :

jsfiddle

app.controller('ParentCtrl', function ($scope, userContext, $timeout) { 
    $scope.firstName = userContext.firstName; 
    $scope.lastName = userContext.lastName; 
    $scope.user = userContext; 
    $timeout(function() { 
     console.log("change firstname"); 
     userContext.firstName= "Bart"; 
    }, 3000); 
}); 

상황이 당신이와 컨트롤러 당 정보 UserContext로 다른 일을 할 때 더 흥미있어. 이 경우 필요에 따라 컨트롤러간에 동기화가 필요할 수 있습니다. 컨트롤러간에 상태를 공유하고 컨트롤러간에 통신하는 것에 대한 여러 가지 대답이 있습니다.

Answer 2

은 아마 난 당신이 정확하게 필요한 것을 가지고 didnt한다하지만 controllerA에서 데이터 변경 후 controllerB 듣고 당신의 논리를 실행할 수 있다면 난 당신이 컨트롤러 간의 이벤트를 방송 할 수 $broadcast

봐 얻을하는 것이 좋습니다, 그래서 (및 viceversa에) 해당 이벤트가 발생하면. http://mariuszprzydatek.com/2013/12/28/sharing-data-between-controllers-in-angularjs-pubsub-event-bus-example/

또는 더러운 방법은 모든 응용 프로그램에서 동일한 데이터를 처리 할 수 ​​$ rootScope를 사용할 수 있으므로 변경할 때 워크 플로 어디에서나 변경 : 여기

는 설명이다.

희망 하시겠습니까?

Answer 3

몇 가지 옵션이 있습니다.

1 - 서비스 및 브로드 캐스트 이벤트를 사용합니다.

// service 
app.service("DataService", function($rootScope) { 
    var _name = ''; 
    var result = { 
     setName : function(name) { 
      _name = name; 
      $rootScope.$broadcast("nameChanged", _name); 
     }, 
     getName : function() { 
      return _name; 
     } 
    } 
    return result; 
}); 

// controller(s) 
app.controller("ObservingController", function($scope) { 
    $scope.$on("nameChanged", function(name) { 
     console.log("Something changed with name."); 
    }); 
}); 

// other controllers 
app.controller("ModifyingController", function($scope, DataService) { 
    // triggers the broadcast 
    DataService.setName("bob"); 
}); 

2) 식

// controller - use the same DataService as above 
app.controller("WatchingController", function($scope, DataService) { 
    // bind the service to the scope for the expression 
    $scope.DataService = DataService; 
    $scope.$watch("DataService.getName()", function(newVal, oldVal) { 
     console.log("Name changed " + newVal); 
    }); 
}); 

그것은 당신이 원하는 무엇을 당신까지로 변경하세요. 내 서비스도 다소 불완전하게 작성되었으며 단지 예일뿐입니다. $ rootScope는 모든 하위 범위로 브로드 캐스트하는 데에만 사용됩니다. 거기에 데이터를 저장하는 것은 권장하지 않습니다.

데이터 컨텍스트의 경우 서비스에서이를 감싸서 노출하면 서비스 또는 서비스에서 노출 된 변수를 watch 예제와 같은 범위에 바인딩하면 시계가 트리거됩니다.

// service 
app.service("DataContextService", function() { 
    var context = { 
     firstName : "", 
     lastName : "" 
    }; 
    return { 
     context : context 
    }; 
}); 

// controller 
app.controller("Watcher", function($scope, DataContextService) { 
    $scope.context = DataContextService.context; 
    $scope.$watch("context.firstName", function(newVal, oldVal) { 
     console.log("Change.."); 
    }); 
}); 

app.controller("Modifier", function($scope, DataContextService) { 
    // causes the watch to trigger 
    DataContextService.context.firstName = "Bob"; 
});