캔 원 앵귤러JS 컨트롤러가 다른 컨트롤러를 호출합니까?
하나의 컨트롤러를 다른 컨트롤러로 사용할 수 있습니까?
예를 들어 다음과 같습니다.
에서는, 「HTML」에 를 간단하게 합니다.MessageCtrl의 messageCtrl.jsfilename을 클릭합니다.
<html xmlns:ng="http://angularjs.org/">
<head>
<meta charset="utf-8" />
<title>Inter Controller Communication</title>
</head>
<body>
<div ng:controller="MessageCtrl">
<p>{{message}}</p>
</div>
<!-- Angular Scripts -->
<script src="http://code.angularjs.org/angular-0.9.19.js" ng:autobind></script>
<script src="js/messageCtrl.js" type="text/javascript"></script>
</body>
</html>
컨트롤러 파일에는 다음 코드가 포함되어 있습니다.
function MessageCtrl()
{
this.message = function() {
return "The current date is: " + new Date().toString();
};
}
현재 날짜만 출력하면 됩니다.
, 「」는 「」입니다.DateCtrl 형식으로 .MessageCtrl떻게게 하면 ?? ???는 DI와 이 있는 것 .XmlHttpRequests서비스에 액세스 합니다.
컨트롤러 간에 통신하는 방법은 여러 가지가 있습니다.
가장 좋은 방법은 서비스를 공유하는 것입니다.
function FirstController(someDataService)
{
// use the data service, bind to template...
// or call methods on someDataService to send a request to server
}
function SecondController(someDataService)
{
// has a reference to the same instance of the service
// so if the service updates state for example, this controller knows about it
}
또 다른 방법은 범위 내에서 이벤트를 내보내는 것입니다.
function FirstController($scope)
{
$scope.$on('someEvent', function(event, args) {});
// another controller or even directive
}
function SecondController($scope)
{
$scope.$emit('someEvent', args);
}
어느 경우든, 어느 디렉티브와도 통신할 수 있습니다.
http://jsfiddle.net/simpulton/XqDxG/ 를 참조해 주세요.
또, 다음의 비디오도 봐 주세요.컨트롤러 간의 통신
HTML:
<div ng-controller="ControllerZero">
<input ng-model="message" >
<button ng-click="handleClick(message);">LOG</button>
</div>
<div ng-controller="ControllerOne">
<input ng-model="message" >
</div>
<div ng-controller="ControllerTwo">
<input ng-model="message" >
</div>
javascript:
var myModule = angular.module('myModule', []);
myModule.factory('mySharedService', function($rootScope) {
var sharedService = {};
sharedService.message = '';
sharedService.prepForBroadcast = function(msg) {
this.message = msg;
this.broadcastItem();
};
sharedService.broadcastItem = function() {
$rootScope.$broadcast('handleBroadcast');
};
return sharedService;
});
function ControllerZero($scope, sharedService) {
$scope.handleClick = function(msg) {
sharedService.prepForBroadcast(msg);
};
$scope.$on('handleBroadcast', function() {
$scope.message = sharedService.message;
});
}
function ControllerOne($scope, sharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'ONE: ' + sharedService.message;
});
}
function ControllerTwo($scope, sharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'TWO: ' + sharedService.message;
});
}
ControllerZero.$inject = ['$scope', 'mySharedService'];
ControllerOne.$inject = ['$scope', 'mySharedService'];
ControllerTwo.$inject = ['$scope', 'mySharedService'];
어떤 컨트롤러를 다른 컨트롤러로 호출하려면 4가지 방법을 사용할 수 있습니다.
- $rootScope($rootScope 。$emit() 및 $rootScope.$syslog()
- 세컨드 컨트롤러가 child일 경우 Parent child 통신을 사용할 수 있습니다.
- 서비스 사용
- 일종의 해킹 - angular.element()의 도움을 받아
1. $rootScope.$emit() 및 $rootScope.$syslog()
컨트롤러와 그 범위가 파괴될 수 있지만 $rootScope는 애플리케이션 전체에 남습니다.따라서 $rootScope는 모든 범위의 상위이기 때문에 $rootScope를 사용하고 있습니다.
부모에서 자녀로 통신하고 있으며 자녀도 형제와 통신하고 싶다면 $broadcast를 사용할 수 있습니다.
자녀에서 부모로 통신을 수행하고 있으며 형제자매가 없는 경우 $rootScope를 사용할 수 있습니다.$140
HTML
<body ng-app="myApp">
<div ng-controller="ParentCtrl" class="ng-scope">
// ParentCtrl
<div ng-controller="Sibling1" class="ng-scope">
// Sibling first controller
</div>
<div ng-controller="Sibling2" class="ng-scope">
// Sibling Second controller
<div ng-controller="Child" class="ng-scope">
// Child controller
</div>
</div>
</div>
</body>
Angularjs 코드
var app = angular.module('myApp',[]);//We will use it throughout the example
app.controller('Child', function($rootScope) {
$rootScope.$emit('childEmit', 'Child calling parent');
$rootScope.$broadcast('siblingAndParent');
});
app.controller('Sibling1', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside Sibling one');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
app.controller('Sibling2', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside Sibling two');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
app.controller('ParentCtrl', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside parent controller');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
위의 $emit 'childEmit' 코드 콘솔에서는 자녀 형제 내부가 호출되지 않고 부모 내부만 호출되며 $broadcast는 형제 내부와 부모 내부도 호출됩니다.이곳은 퍼포먼스를 행동으로 옮기는 장소입니다.자녀와 부모 간의 통신을 사용하는 경우 더러운 체크를 건너뛰기 위해 $defrelerable이 선호됩니다.
2. 세컨드 컨트롤러가 자녀일 경우 자녀 부모 통신을 사용할 수 있습니다.
가장 좋은 방법 중 하나입니다.자녀가 직계 부모와 통신하고 싶은 경우 $broadcast나 $emit은 필요 없지만 부모에서 자녀로 통신하려면 서비스나 $broadcast 중 하나를 사용해야 합니다.
예를 들어 HTML:-
<div ng-controller="ParentCtrl">
<div ng-controller="ChildCtrl">
</div>
</div>
Angularjs
app.controller('ParentCtrl', function($scope) {
$scope.value='Its parent';
});
app.controller('ChildCtrl', function($scope) {
console.log($scope.value);
});
자식 대 부모 통신을 사용할 때마다 Angularjs는 자식 내부 변수를 검색합니다. 변수가 내부에 없는 경우 부모 컨트롤러 내부의 값을 표시하도록 선택합니다.
3. 서비스 이용
AngularJS는 서비스 아키텍처를 사용하여 "관심 사항 분리" 개념을 지원합니다.서비스는 javascript 기능으로 특정 작업만 수행합니다.이를 통해 이들은 유지보수가 가능하고 테스트 가능한 개별 실체가 됩니다.Angularjs의 의존성 주입 메카니즘을 사용하여 주입하는 서비스.
Angularjs 코드:
app.service('communicate',function(){
this.communicateValue='Hello';
});
app.controller('ParentCtrl',function(communicate){//Dependency Injection
console.log(communicate.communicateValue+" Parent World");
});
app.controller('ChildCtrl',function(communicate){//Dependency Injection
console.log(communicate.communicateValue+" Child World");
});
출력은 Hello Child World 와 Hello Parent World 입니다.Angular docs of services Singletons에 따르면 서비스에 의존하는 각 컴포넌트는 서비스 팩토리에서 생성된 단일 인스턴스에 대한 참조를 받습니다.
4. 해킹의 종류 - angular.element()의 도움을 받아
이 메서드는 Id / unique class.angular.element() 메서드에 의해 요소에서 scope()를 가져오고 scope()는 다른 컨트롤러 내의 $scope 변수를 사용하여 다른 변수의 $scope 변수를 제공합니다.
HTML:-
<div id='parent' ng-controller='ParentCtrl'>{{varParent}}
<span ng-click='getValueFromChild()'>Click to get ValueFormChild</span>
<div id='child' ng-controller='childCtrl'>{{varChild}}
<span ng-click='getValueFromParent()'>Click to get ValueFormParent </span>
</div>
</div>
Angularjs:-
app.controller('ParentCtrl',function($scope){
$scope.varParent="Hello Parent";
$scope.getValueFromChild=function(){
var childScope=angular.element('#child').scope();
console.log(childScope.varChild);
}
});
app.controller('ChildCtrl',function($scope){
$scope.varChild="Hello Child";
$scope.getValueFromParent=function(){
var parentScope=angular.element('#parent').scope();
console.log(parentScope.varParent);
}
});
위의 코드 컨트롤러는 자체 값을 HTML로 표시하고 있으며, 텍스트를 클릭하면 그에 따라 콘솔에 값이 표시됩니다.상위 컨트롤러 스팬을 클릭하면 브라우저가 하위 값을 콘솔로 표시하고 그 반대도 마찬가지입니다.
다음으로 서비스 데이터를 공유하는2개의 컨트롤러의 예를 나타냅니다.
<!doctype html>
<html ng-app="project">
<head>
<title>Angular: Service example</title>
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script>
var projectModule = angular.module('project',[]);
projectModule.factory('theService', function() {
return {
thing : {
x : 100
}
};
});
function FirstCtrl($scope, theService) {
$scope.thing = theService.thing;
$scope.name = "First Controller";
}
function SecondCtrl($scope, theService) {
$scope.someThing = theService.thing;
$scope.name = "Second Controller!";
}
</script>
</head>
<body>
<div ng-controller="FirstCtrl">
<h2>{{name}}</h2>
<input ng-model="thing.x"/>
</div>
<div ng-controller="SecondCtrl">
<h2>{{name}}</h2>
<input ng-model="someThing.x"/>
</div>
</body>
</html>
또, https://gist.github.com/3595424
컨트롤러 간에 데이터 또는 콜 기능을 공유하기 위해 이벤트를 내보내고 브로드캐스트할 경우 다음 링크를 참조하여 다음 링크에서 답변을 확인하십시오.zbynour(일부러)★★★★★★★★★★★★★★★★!!!
firstCtrl 범위가 secondCtrl 범위의 부모일 경우 firstCtrl에서 $emit을 $broadcast로 대체하여 코드가 작동합니다.
function firstCtrl($scope){
$scope.$broadcast('someEvent', [1,2,3]);
}
function secondCtrl($scope){
$scope.$on('someEvent', function(event, mass) {console.log(mass)});
}
스코프 간에 부모-자녀 관계가 없는 경우 컨트롤러에 $rootScope를 삽입하여 모든 자녀 스코프(secondCtrl)에 이벤트를 브로드캐스트할 수 있습니다.
function firstCtrl($rootScope){
$rootScope.$broadcast('someEvent', [1,2,3]);
}
마지막으로 하위 컨트롤러에서 상위 범위로 이벤트를 디스패치해야 할 경우 $scope를 사용할 수 있습니다.$emit. 첫 번째 Ctrl 범위가 두 번째 Ctrl 범위의 부모인 경우:
function firstCtrl($scope){
$scope.$on('someEvent', function(event, data) { console.log(data); });
}
function secondCtrl($scope){
$scope.$emit('someEvent', [1,2,3]);
}
2개의 핀들: (비서비스 접근법)
- 1) 사용 - 사용$scope부모 컨트롤러가 이벤트를 내보내거나 수신할 수 있도록 합니다.http://jsfiddle.net/laan_sachin/jnj6y/
사용 2) 사용법$rootScope관련 없는 컨트롤러 간에 이루어집니다.http://jsfiddle.net/VxafF/
이벤트가 스코프 계층을 오르내리고 복잡한 애플리케이션의 퍼포먼스 보틀링으로 쉽게 저하되기 때문에 실제로 emiss와 브로드캐스트를 사용하는 것은 비효율적입니다.
서비스를 이용하는 것이 좋습니다.다음은 제가 최근에 제 프로젝트 중 하나인 https://gist.github.com/3384419에서 구현한 방법입니다.
기본 아이디어 - pub-sub/이벤트 버스를 서비스로 등록합니다.그런 다음 이벤트/토픽을 구독하거나 게시해야 하는 위치에 이벤트 버스를 삽입합니다.
저도 이 방법을 알아요.
angular.element($('#__userProfile')).scope().close();
그러나 각도 코드에서 jQuery 실렉터를 사용하는 것을 좋아하지 않기 때문에 많이 사용하지 않습니다.
하지 않는 .$broadcast ★★★★★★★★★★★★★★★★★」$emit것은 2개의 가 있는 할 수 require옵션을 지정합니다.ngModel ngForm ng 、 ngForm 、 ngForm 。이를 사용하여 네스트된 디렉티브컨트롤러 또는 같은 요소에 있는 디렉티브컨트롤러 간에 통신할 수 있습니다.
부모/자녀 상황의 경우 사용법은 다음과 같습니다.
<div parent-directive>
<div inner-directive></div>
</div>
부모 부모 디렉티브로 해야 합니다.this이 아니다)$scope
controller: function($scope) {
this.publicMethodOnParentDirective = function() {
// Do something
}
}
에서는, 「」를 할 수 .require함수에 를 할 수 ).scope아이디렉티브의
require: '^parentDirective',
template: '<span ng-click="onClick()">Click on this to call parent directive</span>',
link: function link(scope, iElement, iAttrs, parentController) {
scope.onClick = function() {
parentController.publicMethodOnParentDirective();
}
}
위의 내용은 http://plnkr.co/edit/poeq460VmQER8Gl9w8Oz?p=preview에서 확인할 수 있습니다.
형제지시문은 유사하게 사용되지만 두 지시문은 모두 동일한 요소에 사용됩니다.
<div directive1 directive2>
</div>
다음에서 메서드를 생성하여 사용합니다.directive1:
controller: function($scope) {
this.publicMethod = function() {
// Do something
}
}
에서는 directive2를 할 수 .requirebriety Controller 션etyety 。
require: 'directive1',
template: '<span ng-click="onClick()">Click on this to call sibling directive1</span>',
link: function link(scope, iElement, iAttrs, siblingController) {
scope.onClick = function() {
siblingController.publicMethod();
}
}
이것은, http://plnkr.co/edit/MUD2snf9zvadfnDXq85w?p=preview 에서 확인할 수 있습니다.
이것의 용도는?
부모: 자녀 요소가 자신을 부모에 "등록"해야 하는 경우.ngModel과 ngForm의 관계와 매우 유사합니다.이것은 모델에 영향을 줄 수 있는 특정 동작을 추가할 수 있습니다.부모 요소가 스크롤을 관리하거나 이에 반응하기 위해 특정 자녀의 위치를 관리해야 하는 순수 DOM 기반도 있을 수 있습니다.
형제: 지시어의 동작을 수정할 수 있습니다.ngModel은 ngModel 입력에 사용하는 파서/검증을 추가하는 전형적인 케이스입니다.
표준이 아닌지는 모르겠지만 모든 컨트롤러가 같은 파일에 저장되어 있다면 다음과 같은 작업을 수행할 수 있습니다.
app = angular.module('dashboardBuzzAdmin', ['ngResource', 'ui.bootstrap']);
var indicatorsCtrl;
var perdiosCtrl;
var finesCtrl;
app.controller('IndicatorsCtrl', ['$scope', '$http', function ($scope, $http) {
indicatorsCtrl = this;
this.updateCharts = function () {
finesCtrl.updateChart();
periodsCtrl.updateChart();
};
}]);
app.controller('periodsCtrl', ['$scope', '$http', function ($scope, $http) {
periodsCtrl = this;
this.updateChart = function() {...}
}]);
app.controller('FinesCtrl', ['$scope', '$http', function ($scope, $http) {
finesCtrl = this;
this.updateChart = function() {...}
}]);
보시다시피 indicatorsCtrl은 updateChart를 호출할 때 다른 두 컨트롤러의 updateChart 함수를 호출합니다.
상위 컨트롤러(MessageCtrl)에 '$controller' 서비스를 주입한 후 다음을 사용하여 하위 컨트롤러(DateCtrl)를 인스턴스화/주입할 수 있습니다.
$scope.childController = $controller('childController', { $scope: $scope.$new() });
이제 하위 컨트롤러의 메서드를 서비스로 호출하여 데이터에 액세스할 수 있습니다.
무슨 문제가 있으면 알려주세요.
다음은 다음 항목입니다.publish-subscribeAngular JS와 무관한 접근법.
검색 매개 변수 컨트롤러
//Note: Multiple entities publish the same event
regionButtonClicked: function ()
{
EM.fireEvent('onSearchParamSelectedEvent', 'region');
},
plantButtonClicked: function ()
{
EM.fireEvent('onSearchParamSelectedEvent', 'plant');
},
검색 선택 컨트롤러
//Note: It subscribes for the 'onSearchParamSelectedEvent' published by the Search Param Controller
localSubscribe: function () {
EM.on('onSearchParamSelectedEvent', this.loadChoicesView, this);
});
loadChoicesView: function (e) {
//Get the entity name from eData attribute which was set in the event manager
var entity = $(e.target).attr('eData');
console.log(entity);
currentSelectedEntity = entity;
if (entity == 'region') {
$('.getvalue').hide();
this.loadRegionsView();
this.collapseEntities();
}
else if (entity == 'plant') {
$('.getvalue').hide();
this.loadPlantsView();
this.collapseEntities();
}
});
이벤트 매니저
myBase.EventManager = {
eventArray:new Array(),
on: function(event, handler, exchangeId) {
var idArray;
if (this.eventArray[event] == null) {
idArray = new Array();
} else {
idArray = this.eventArray[event];
}
idArray.push(exchangeId);
this.eventArray[event] = idArray;
//Binding using jQuery
$(exchangeId).bind(event, handler);
},
un: function(event, handler, exchangeId) {
if (this.eventArray[event] != null) {
var idArray = this.eventArray[event];
idArray.pop(exchangeId);
this.eventArray[event] = idArray;
$(exchangeId).unbind(event, handler);
}
},
fireEvent: function(event, info) {
var ids = this.eventArray[event];
for (idindex = 0; idindex < ids.length; idindex++) {
if (ids[idindex]) {
//Add attribute eData
$(ids[idindex]).attr('eData', info);
$(ids[idindex]).trigger(event);
}
}
}
};
세계적인
var EM = myBase.EventManager;
각도 1.5에서는 다음을 수행하여 이를 달성할 수 있습니다.
(function() {
'use strict';
angular
.module('app')
.component('parentComponent',{
bindings: {},
templateUrl: '/templates/products/product.html',
controller: 'ProductCtrl as vm'
});
angular
.module('app')
.controller('ProductCtrl', ProductCtrl);
function ProductCtrl() {
var vm = this;
vm.openAccordion = false;
// Capture stuff from each of the product forms
vm.productForms = [{}];
vm.addNewForm = function() {
vm.productForms.push({});
}
}
}());
이것은 부모 컴포넌트입니다.여기서 나는 다른 오브젝트를 내 안에 밀어넣는 기능을 만들었다.productFormsarray - note - 이것은 제 예에 불과합니다.이 함수는 어떤 것이든 상관없습니다.
,.require:
(function() {
'use strict';
angular
.module('app')
.component('childComponent', {
bindings: {},
require: {
parent: '^parentComponent'
},
templateUrl: '/templates/products/product-form.html',
controller: 'ProductFormCtrl as vm'
});
angular
.module('app')
.controller('ProductFormCtrl', ProductFormCtrl);
function ProductFormCtrl() {
var vm = this;
// Initialization - make use of the parent controllers function
vm.$onInit = function() {
vm.addNewForm = vm.parent.addNewForm;
};
}
}());
함수에 .addNewFormHTML에 바인딩되어 다른 함수처럼 호출할 수 있습니다.
하시면 됩니다.$controllerAngular Angular JS에서 입니다.JS.
angular.module('app',[]).controller('DateCtrl', ['$scope', function($scope){
$scope.currentDate = function(){
return "The current date is: " + new Date().toString();
}
}]);
angular.module('app').controller('MessageCtrl', ['$scope', function($scope){
angular.extend(this, $controller('DateCtrl', {
$scope: $scope
}));
$scope.messageWithDate = function(message){
return "'"+ message + "', " + $scope.currentDate;
}
$scope.action2 = function(){
console.log('Overridden in ChildCtrl action2');
}
}]);
언급URL : https://stackoverflow.com/questions/9293423/can-one-angularjs-controller-call-another
'source' 카테고리의 다른 글
| __get__, __set__ 및 Python 기술자에 대해 (0) | 2022.11.18 |
|---|---|
| 오류와 예외의 차이점은 무엇입니까? (0) | 2022.11.18 |
| PHP로 작성된 괜찮은 PHP 파서는 없습니까? (0) | 2022.11.18 |
| 사전을 값별로 정렬하려면 어떻게 해야 합니까? (0) | 2022.11.18 |
| Java에서 파일을 수정일별로 정렬하는 가장 좋은 방법은 무엇입니까? (0) | 2022.11.18 |