변경 범위 변수를 모달 창에 전달하려고합니다. 모달이 열리면 변수를 변경하는 데 문제가 있습니다. 현재 모달이 열릴 때 컨트롤러에 데이터가 전달됩니다.
scope.open = function (roomname, image) {
console.log("clicked modal");
console.log("roomName: " + roomname);
console.log("image: " + image);
scope.imageContents = image;
console.log("scope.imageContents: " + scope.imageContents);
scope.modalInstance = $modal.open({
animation: scope.animationsEnabled,
templateUrl: 'tpl/modal-template.tpl.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function () {
console.log("scope.imageContents in resolve: " + scope.imageContents);
return scope.imageContents;
},
compassHeading: function () {
console.log("scope.imageContents in resolve: " + scope.compassHeading);
return scope.compassHeading;
}
}
});
};
내 컨트롤러 :
angular.module('TestApp').controller('ModalInstanceCtrl',function ($scope, $modalInstance, items, compassHeading) {
'use strict';
$scope.items = items;
$scope.selected = {
item: $scope.items
};
$scope.compassHeading = compassHeading;
});
compass Heading 변수는 지속적으로 업데이트되므로 이러한 변경 사항을 모달에 표시하기 위해 compassHeading 변수를 가져 오려고합니다.
다른 변수와 함께 변수가있는 서비스를 사용할 수 있습니다.
angular.module('TestApp')
.service('TestService', [function () {
return {
model: {
'compassHeading': null
}
};
}]);
그리고 메인 컨트롤러에서 다음과 같이 사용할 수 있습니다.
angular.module('TestApp')
.controller('MainController', ['$scope', 'TestService', function ($scope, testService) {
$scope.model = testService.model;
...
}]);
그리고 당신의 $modal컨트롤러, 당신은 동일한 기능을 수행 할 수 있습니다 :
angular.module('TestApp')
.controller('ModalInstanceCtrl', ['$scope', 'TestService', function ($scope, testService) {
$scope.model = testService.model;
}]);
그런 다음의 값을 compassHeading변경해야 할 때마다 normal :을 사용하여 변경할 수 있습니다 $scope.model.compassHeading = <some_value_here>;.
또한 compassHeading컨트롤러 외부에서 변경된 경우 model서비스 의 개체가 참조로 호출 되기 때문에의 값이 컨트롤러 내부에서도 변경됩니다 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다