AngularJS: 컨트롤러 간에 변수를 전달하려면 어떻게 해야 합니까?
Angular 컨트롤러가 2개 있습니다.
function Ctrl1($scope) {
$scope.prop1 = "First";
}
function Ctrl2($scope) {
$scope.prop2 = "Second";
$scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}
수 없다Ctrl1에 inside inside inside Ctrl2이치노★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
function Ctrl2($scope, Ctrl1) {
$scope.prop2 = "Second";
$scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}
에러가 납니다.이거 할 줄 아는 사람 있어요?
하고있다
Ctrl2.prototype = new Ctrl1();
또 실패한다.
메모: 이들 컨트롤러는 서로 네스트되어 있지 않습니다.
여러 컨트롤러 간에 변수를 공유하는 한 가지 방법은 서비스를 생성하여 사용하는 모든 컨트롤러에 주입하는 것입니다.
간단한 서비스 예:
angular.module('myApp', [])
.service('sharedProperties', function () {
var property = 'First';
return {
getProperty: function () {
return property;
},
setProperty: function(value) {
property = value;
}
};
});
컨트롤러에서의 서비스 사용:
function Ctrl2($scope, sharedProperties) {
$scope.prop2 = "Second";
$scope.both = sharedProperties.getProperty() + $scope.prop2;
}
이것은 이 블로그(특히 Lesson 2 등)에 매우 상세하게 기술되어 있습니다.
여러 컨트롤러에서 이러한 속성에 바인드하려면 바인딩된 참조를 유지하기 위해 기본 유형(부울, 문자열, 숫자)이 아닌 개체의 속성에 바인드하는 것이 더 효과적이라는 것을 알게 되었습니다.
★★★★var property = { Property1: 'First' };var property = 'First';.
업데이트: (바람직하게) 여기서 좀 더 명확히 하자면, 다음 예시를 보여주는 바이올린입니다.
- 공유 값의 정적 복사본에 바인딩(myController1)
- 프리미티브(문자열)에 바인딩
- 개체 속성에 바인딩(범위 변수에 저장됨)
- 값이 업데이트될 때 UI를 업데이트하는 공유 값에 바인딩됩니다(myController2).
- 프리미티브(문자열)를 반환하는 함수에 바인딩
- 개체의 속성에 바인딩
- 객체의 속성에 대한 양방향 바인딩
간단한 예를 들어 간단한 것을 묘사하는 것을 좋아합니다.
아주 내용이 .Service§:
angular.module('toDo',[])
.service('dataService', function() {
// private variable
var _dataObj = {};
// public API
this.dataObj = _dataObj;
})
.controller('One', function($scope, dataService) {
$scope.data = dataService.dataObj;
})
.controller('Two', function($scope, dataService) {
$scope.data = dataService.dataObj;
});
여기 내용이 .Factory§:
angular.module('toDo',[])
.factory('dataService', function() {
// private variable
var _dataObj = {};
// public API
return {
dataObj: _dataObj
};
})
.controller('One', function($scope, dataService) {
$scope.data = dataService.dataObj;
})
.controller('Two', function($scope, dataService) {
$scope.data = dataService.dataObj;
});
이것이 너무 간단하다면, 여기 더 복잡한 예가 있습니다.
관련된 베스트 프랙티스의 코멘트에 대해서는, 여기를 참조해 주세요.
--- 이 답변은 이 질문에 대한 답변이 아닌 것은 알지만, 이 질문을 읽고 공장 등의 서비스를 취급하고 싶은 사람은 이 문제를 회피해 주었으면 합니다.
이를 위해서는 서비스 또는 팩토리를 사용해야 합니다.
서비스는 중첩되지 않은 컨트롤러 간에 데이터를 공유하는 데 가장 적합한 방법입니다.
데이터 공유에 관한 이 항목에 대한 매우 좋은 주석으로 객체를 선언하는 방법을 들 수 있습니다.나는 앵귤러에 빠져서 운이 나빴다.JS 트랩에 대해서 읽기 전에 너무 당황했어요.그러니 내가 이 문제를 피할 수 있도록 도와줄게.
'ng-book'에서 읽었는데Angular J에 관한 전집각진 S"컨트롤러에 베어 데이터로 작성된 JS ng-모델이 잘못되었습니다!
$scope 요소는 다음과 같이 작성해야 합니다.
angular.module('myApp', [])
.controller('SomeCtrl', function($scope) {
// best practice, always use a model
$scope.someModel = {
someValue: 'hello computer'
});
그리고 이렇게는 안 돼
angular.module('myApp', [])
.controller('SomeCtrl', function($scope) {
// anti-pattern, bare value
$scope.someBareValue = 'hello computer';
};
});
이는 DOM(html 문서)에 다음과 같이 콜을 포함하도록 권장(BEST PRACTES)하기 때문입니다.
<div ng-model="someModel.someValue"></div> //NOTICE THE DOT.
이는 자녀 컨트롤러가 부모 컨트롤러에서 개체를 변경할 수 있도록 하려면 중첩된 컨트롤러에 매우 유용합니다.
그러나 이 경우 중첩된 범위를 원하지 않지만 서비스에서 컨트롤러로 개체를 가져오는 것과 유사한 측면이 있습니다.
서비스 '공장'이 있고 반환 공간에 objectC를 포함하는 objectB가 포함된 objectA가 있다고 가정합니다.
컨트롤러에서 objectC를 스코프로 가져오려는 경우 다음과 같이 말하는 것이 실수입니다.
$scope.neededObjectInController = Factory.objectA.objectB.objectC;
그러면 안 되는데...대신 점 하나만 사용하세요.
$scope.neededObjectInController = Factory.ObjectA;
그런 다음 DOM에서 objectA에서 objectC를 호출할 수 있습니다.이것은 공장과 관련된 베스트 프랙티스이며, 가장 중요한 것은 예기치 않은 오류와 잡을 수 없는 오류를 방지하는 데 도움이 된다는 것입니다.
서비스를 생성하지 않고 $rootScope를 사용하는 솔루션:
앱 컨트롤러 간에 속성을 공유하려면 Angular $rootScope를 사용할 수 있습니다.이것은 데이터를 공유하기 위한 또 다른 옵션이며, 사람들이 이를 알 수 있도록 하기 위한 것입니다.
컨트롤러 간에 일부 기능을 공유하는 권장 방법은 서비스입니다. $rootscope를 사용하여 글로벌 속성을 읽거나 변경할 수 있습니다.
var app = angular.module('mymodule',[]);
app.controller('Ctrl1', ['$scope','$rootScope',
function($scope, $rootScope) {
$rootScope.showBanner = true;
}]);
app.controller('Ctrl2', ['$scope','$rootScope',
function($scope, $rootScope) {
$rootScope.showBanner = false;
}]);
템플릿에서 $rootScope 사용($root를 사용하여 속성에 액세스):
<div ng-controller="Ctrl1">
<div class="banner" ng-show="$root.showBanner"> </div>
</div>
위의 샘플은 매우 효과가 있었습니다.여러 값을 관리해야 할 경우를 대비해서 수정한 것뿐입니다.도움이 됐으면 좋겠네요!
app.service('sharedProperties', function () {
var hashtable = {};
return {
setValue: function (key, value) {
hashtable[key] = value;
},
getValue: function (key) {
return hashtable[key];
}
}
});
나는 가치관을 사용하는 경향이 있어, 왜 이것이 나쁜 생각인지에 대해 논의하는 것을 누구라도 기쁘게 생각한다.
var myApp = angular.module('myApp', []);
myApp.value('sharedProperties', {}); //set to empty object -
그런 다음 서비스에 따라 값을 삽입합니다.
ctrl1로 설정합니다.
myApp.controller('ctrl1', function DemoController(sharedProperties) {
sharedProperties.carModel = "Galaxy";
sharedProperties.carMake = "Ford";
});
ctrl2에서 액세스합니다.
myApp.controller('ctrl2', function DemoController(sharedProperties) {
this.car = sharedProperties.carModel + sharedProperties.carMake;
});
다음 예시는 형제 컨트롤러 간에 변수를 전달하고 값이 변경되었을 때 액션을 수행하는 방법을 보여 줍니다.
사용 예: 사이드바에 다른 보기의 내용을 변경하는 필터가 있습니다.
angular.module('myApp', [])
.factory('MyService', function() {
// private
var value = 0;
// public
return {
getValue: function() {
return value;
},
setValue: function(val) {
value = val;
}
};
})
.controller('Ctrl1', function($scope, $rootScope, MyService) {
$scope.update = function() {
MyService.setValue($scope.value);
$rootScope.$broadcast('increment-value-event');
};
})
.controller('Ctrl2', function($scope, MyService) {
$scope.value = MyService.getValue();
$scope.$on('increment-value-event', function() {
$scope.value = MyService.getValue();
});
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<h3>Controller 1 Scope</h3>
<div ng-controller="Ctrl1">
<input type="text" ng-model="value"/>
<button ng-click="update()">Update</button>
</div>
<hr>
<h3>Controller 2 Scope</h3>
<div ng-controller="Ctrl2">
Value: {{ value }}
</div>
</div>컨트롤러 간, 나아가 지시사항 간에 데이터를 공유하는 권장방법은 이미 지적된 바와 같이 서비스(팩토리)를 사용하는 것이라는 점을 지적하고, 이를 위한 실천적인 예를 제시하고자 합니다.
동작하는 플런커는 다음과 같습니다. http://plnkr.co/edit/Q1VdKJP2tpvqqJL1LF6m?p=info
먼저 공유 데이터가 있는 서비스를 만듭니다.
app.factory('SharedService', function() {
return {
sharedObject: {
value: '',
value2: ''
}
};
});
그런 다음 컨트롤러에 삽입하고 스코프의 공유 데이터를 가져옵니다.
app.controller('FirstCtrl', function($scope, SharedService) {
$scope.model = SharedService.sharedObject;
});
app.controller('SecondCtrl', function($scope, SharedService) {
$scope.model = SharedService.sharedObject;
});
app.controller('MainCtrl', function($scope, SharedService) {
$scope.model = SharedService.sharedObject;
});
또, 지시에 대해서도 같은 방법으로 동작할 수 있습니다.
app.directive('myDirective',['SharedService', function(SharedService){
return{
restrict: 'E',
link: function(scope){
scope.model = SharedService.sharedObject;
},
template: '<div><input type="text" ng-model="model.value"/></div>'
}
}]);
이 실용적이고 깨끗한 답변이 누군가에게 도움이 되기를 바랍니다.
서비스나 공장에서 할 수 있습니다.그들은 몇 가지 핵심 차이점 때문에 본질적으로 동일하다.저는 thinkster.io에서 이 설명이 가장 이해하기 쉽다는 것을 알았습니다.심플하고, 적절하고, 효과적입니다.
또한 속성을 상위 범위의 일부로 만들 수 없습니까?
$scope.$parent.property = somevalue;
그게 맞다는 건 아니지만 효과가 있어.
아, 다른 대안으로 이 새로운 것을 조금 더 드세요.로컬 스토리지로, 각진 곳에서 작동합니다.천만에요.(하지만 정말 고마워)
https://github.com/gsklee/ngStorage
기본값을 정의합니다.
$scope.$storage = $localStorage.$default({
prop1: 'First',
prop2: 'Second'
});
값에 액세스 합니다.
$scope.prop1 = $localStorage.prop1;
$scope.prop2 = $localStorage.prop2;
값 저장
$localStorage.prop1 = $scope.prop1;
$localStorage.prop2 = $scope.prop2;
앱에 ngStorage를 삽입하고 컨트롤러에 $localStorage를 주입하는 것을 잊지 마십시오.
두 가지 방법이 있습니다.
1) get/set 서비스 이용
2)$scope.$emit('key', {data: value}); //to set the value
$rootScope.$on('key', function (event, data) {}); // to get the value
두 번째 접근법:
angular.module('myApp', [])
.controller('Ctrl1', ['$scope',
function($scope) {
$scope.prop1 = "First";
$scope.clickFunction = function() {
$scope.$broadcast('update_Ctrl2_controller', $scope.prop1);
};
}
])
.controller('Ctrl2', ['$scope',
function($scope) {
$scope.prop2 = "Second";
$scope.$on("update_Ctrl2_controller", function(event, prop) {
$scope.prop = prop;
$scope.both = prop + $scope.prop2;
});
}
])
Html:
<div ng-controller="Ctrl2">
<p>{{both}}</p>
</div>
<button ng-click="clickFunction()">Click</button>
상세한 것에 대하여는, 「플런커」를 참조해 주세요.
http://plnkr.co/edit/cKVsPcfs1A1Wwlud2jtO?p=preview
위의 답변을 통해 확인했습니다.pejman's 12월 29일 13:31에 pejman's 16을 추천합니다만, 완전한 답변을 남기지 않았습니다.여기에서는 이것을 -->로 하겠습니다(서비스 영역의 변경을 위해 컨트롤러의 스코프 중 하나에 서비스와 청취자 $watch가 필요합니다).
var app =
angular.module('myApp', ['ngRoute', 'ngSanitize']);
app.service('bridgeService', function () {
var msg = "";
return msg;
});
app.controller('CTRL_1'
, function ($scope, $http, bridgeService)
{
$http.get(_restApi, config)
.success(
function (serverdata, status, config) {
$scope.scope1Box = bridgeService.msg = serverdata;
});
});
app.controller('CTRL_2'
, function ($scope, $http, bridgeService)
{
$scope.$watch( function () {
return (bridgeService.msg);
}, function (newVal, oldVal) {
$scope.scope2Box = newVal;
}, true
);
});
서비스를 하고 싶지 않다면 이렇게 하면 됩니다.
var scope = angular.element("#another ctrl scope element id.").scope();
scope.plean_assign = some_value;
$rootScope 및 서비스 외에도 각도 확장을 통해 공유 데이터를 추가할 수 있는 깨끗하고 간편한 대체 솔루션이 있습니다.
컨트롤러:
angular.sharedProperties = angular.sharedProperties
|| angular.extend(the-properties-objects);
이 속성은 범위와 분리된 'angular' 개체에 속하며 범위 및 서비스에서 공유할 수 있습니다.
오브젝트를 주입할 필요가 없는 장점 중 하나는 디폴트 직후 어디서나 액세스 할 수 있다는 것입니다.
언급URL : https://stackoverflow.com/questions/12008908/angularjs-how-can-i-pass-variables-between-controllers
'programing' 카테고리의 다른 글
| Larabel의 쿼리 빌더 JSON 셀렉터 'field->key'가 구문 오류를 발생시킵니다. (0) | 2022.10.21 |
|---|---|
| Class.newInstance() 대신 사용할 항목 (0) | 2022.10.21 |
| 판다: 최대 열 수 설정 (0) | 2022.10.21 |
| 어떤 리스트가 다른 리스트의 서브셋인지 확인하려면 어떻게 해야 합니까? (0) | 2022.10.21 |
| Python에서 값을 할당하지 않고 변수만 선언할 수 있습니까? (0) | 2022.10.21 |