AngularJS 자체는 데이터 및 코드의 공유 및 재사용을 실현하기위한 지침 및 서비스 서비스와 같은 방법을 제공했습니다. 그러나 실제 프로젝트 개발에서 아마도 게으르거나 편의로 인해 두 컨트롤러간에 데이터 공유를 직접 통신하거나 호출 기능 및 메소드를 직접 통신하려고합니다. 여기서 우리는이 요구 사항을 충족 할 수있는 방법을 볼 것입니다.
싱글 톤 서비스
Singleton Service는 AngularJS 자체가 지원하는 데이터 및 코드 공유 방법입니다. 싱글 톤이기 때문에 모든 컨트롤러는 동일한 데이터에 액세스합니다. 예를 들어 다음 서비스를 구현할 수 있습니다.
Angular .Module ( 'App') .Service ( 'ObjectService', [Objectservice]); function objectservice () {var list = {}; return {get : function (id) {return list [id]; }, set : function (id, v) {list [id] = v; }};} 하나의 컨트롤러에서 ObjectService.set('i', 1) 의 데이터 세트는 다른 컨트롤러의 ObjectService.get('i') 를 통해 얻을 수 있습니다.
방송 및 이벤트
AngularJS에서는 이벤트를 트리거하고 방송을 보낼 때 매개 변수를 전달할 수 있습니다. 이 기능은 데이터 공유를 실현하는 데 사용될 수 있습니다. 이벤트 및 방송과 관련된 세 가지 방법, 즉 다음과 관련이 있습니다.
1. $ emit () : 트리거 이벤트, 예를 들어 자식 컨트롤러를 상위 컨트롤러로, 컨트롤러를 $ rootscope 로 전달할 수 있습니다.
2. $ broadcast () : 방송을 보내서 데이터를 전달할 수 있습니다. 예를 들어, 상위 컨트롤러는 데이터를 하위 컨트롤러로 전달하거나 $ rootscope가 데이터를 모든 컨트롤러로 전달합니다.
3. $ on () : 이벤트 및 방송을 듣고 $ Emit 및 $ Broadcast를 캡처 할 수 있습니다.
컨트롤러 간의 통신은 세 가지 상황으로 나눌 수 있습니다.
1. 직접 협회 컨트롤러 없음 : $ rootscope를 사용하십시오. $ emit (), $ rootscope. $ boardcast () 또는 $ scope. $는 데이터를 방출하고 $ rootscope를 통해 데이터를 얻습니다. $ on ().
2. 학부모 컨트롤러 대 하위 컨트롤러 : 학부모 컨트롤러는 $ scope를 사용하여 데이터를 전송하고 하위 컨트롤러는 $ scope. $ on ()을 사용하여 데이터를 가져옵니다.
3. 자식 컨트롤러 대 부모 컨트롤러 : 자식 컨트롤러는 $ scope를 사용하여 데이터를 보내고 부모 컨트롤러는 $ scope. $ on ()을 통해 데이터를 얻습니다.
간단한 사용법은 다음과 같습니다.
// 하나의 ControlLerRangular .Module ( 'app') .controller ( 'oneController', [ '$ scope', oneController]); 함수 oneController ($ scope) {var data = {value : 'test'}; $ rootscope. $ broadcast ( 'Open.notice.editor', data);} // 기타 ControlLerRangular .Module ( 'App') .Controller ( 'OtherController', [ '$ scope', Other Controller]); 기능 다른 구성 ($ scope) {$ scope. $ on ( 'Open.editor. $ scope.open (데이터).부모 컨트롤러
두 컨트롤러 모두 동일한 상위 컨트롤러를 함께 공유하면 부모 컨트롤러를 통해 데이터 공유 및 통신을 수행 할 수 있습니다. 예를 들어:
<div ng-controller = "ParentController"> <div ng-controller = "childonecontroller"> </div> <div ng-controller = "hildtwocontroller"> </div> </div>
// 학부모 컨트롤러 Angular .Module ( 'app') .controller ( 'ParentController', [ '$ scope', ParentController]); function parentController ($ scope) {// data $ scope.data = null; childonecontroller]); function childonecontroller ($ scope) {// 데이터 설정 $ scope. $ parent.data = 1;} // childroller angular .module ( 'app') .controller ( 'childtwocontroller', [ '$ scope', '$ timeout', functionwocontroller]; $ timeout) {$ timeout (function () {// data read console.log ($ scope. $ parent.data);}, 1000);}글로벌 또는 공유 변수
AngularJS는 두 가지 변수, $ 창과 $ localStorage 의 캡슐화를 제공합니다 . 이 두 값을 수정하고 청취함으로써 컨트롤러 간의 데이터 공유 및 통신을 달성 할 수 있습니다. 이 방법은 다음과 같습니다.
// 하나의 ControlLerRangular .Module ( 'app') .controller ( 'oneController', [ '$ scope', '$ wind [ '$ scope', othercontroller]); function aerter controller ($ scope) {// $ scope를 수정하기 위해 듣습니다. $ watch (function () {return $ incho (return $ incho.data;}, function (n) {$ scope.windowData = n;});}.실제로이 모니터링 및 수정 방법은 다른 통신 방법에도 사용될 수 있습니다.
요소 바인딩
AngularJS에서는 요소를 통해 컨트롤러 인스턴스를 얻을 수 있습니다. 이렇게하면 빨리 얻을 수 있습니다
컨트롤러에서 데이터를 수정 하거나이 컨트롤러의 메소드를 호출하십시오. 예를 들어:
<div ng-controller = "AppController"> <div id = "div-a"> </div> </div>
다음 방법을 통해 컨트롤러 인스턴스를 얻을 수 있습니다.
var instance = Angular.element (document.getElementById ( 'div-a')). scope ();
그런 다음이 인스턴스를 사용하여 컨트롤러 메소드를 호출하여 값을 얻고 수정할 수 있습니다. 요소 자체에 컨트롤러가 있어야하는지 또는 요소의 상위 요소에 컨트롤러가 있어야하는지 여부를 성공적으로 얻을 수는 없습니다.
이것은 각도 컨트롤러 간의 데이터 공유 및 통신에 관한 것입니다. AngularJS에서 데이터 공유에 대한 지식에 관심이있는 친구들은 함께 배울 수 있습니다. Wulin.com을 지원 해주셔서 감사합니다.