이 글에서는 컨트롤러 통신의 angular 4가지 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
【관련 추천: "angular Tutorial"】
먼저 Angular 컨트롤러 통신의 4가지 방법을 요약해 보겠습니다.
범위 상속.
$scope를 통해 이벤트를 방송하세요.
이벤트 이미터 모듈.
서비스.
1. 범위 상속
하위 범위는 상위 범위에 선언된 변수 및 함수에 액세스할 수 있습니다.
<div ng-controller="Controller1"> <div ng-controller="Controller2"> this prints '42':{{answer}} </div> </div> m.controller('Controller1', function ($scope) { $scope.answer = 42; }); m.controller('Controller2', function ($scope) { console.log($scope.answer); });
2. $scope
$emit 호출을 통한 브로드캐스트 이벤트는 범위를 확장할 수 있고 $broadcast는 하위 범위로 전파되며 $on은 청취자를 등록할 수 있습니다.
<div ng-controller="Controller1"> <div ng-controller="Controller2"> </div> </div> m.controller('Controller1', function ($scope) { $scope.$on('ping', function (){ console.log('pong'); }); $scope.$broadcast('broadcast'); }); m.controller('Controller2', function ($scope) { $scope.$emit('ping'); $scope.$on('broadcast', function (){ console.log('broadcast'); }); });
3. 이벤트 이미터 모듈 event-emitter
event-emitter 모듈은 3가지 주요 차이점이 있습니다.
event-emitter는 범위에 독립적이므로 다음에서 사용하는 것이 이상적입니다. 범위에 액세스할 수 없는 서비스.
사용될 함수의 이름은 .on(), .emit()입니다.
해당하는 $broadcast() 함수가 없습니다.
<script type="text/javascript" src="angular.js"></script> <script type="text/javascript" src="event-emitter.js"></script> <script type="text/javascript"> var app = angular.module('app', []); app.factory('userService', function ($timeout, $window) { var emitter = $window.emitter(); var user = {}; //模拟http错误 $timeout(function () { user.emit('error', 'Could not connect to server'); }, 1000); return user; }); app.factory('profileService', function (userService) { var ret = { user: userService, }; userService.on('error', function () { console.log('get error'); }); return ret; }); </script>
4. 가장 일반적으로 사용되는 통신은 service입니다.
서비스는 싱글톤이므로 모든 구성 요소에서 서비스 값을 변경하면 다른 구성 요소에 영향을 미치게 됩니다. 서비스를 다음과 같이 나열하면 됩니다. 위의 코드에 표시된 대로 dependency.
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 교육을 방문하세요! !
위 내용은 각도 컨트롤러 통신의 4가지 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!