angular.ui 모듈 내부에 각도 컨트롤러 의존성을 주입하는 올바른 방법
다음 angular.ui 모달의 예는modalInstance호출하다ModalIntanceCtrl나중에 함수로 생성됩니다.
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
두 가지 질문/문제가 있습니다.
docs에서는 (최소화 문제로 인해) 다른 방법으로 컨트롤러를 작성할 것을 권장합니다.다음은 예를 제시하겠습니다.
myApp.controller('GreetingCtrl', ['$scope', function($scope) { $scope.greeting = 'Hola!'; }]);
그런데 이렇게 컨트롤러를 만들면 어떻게 modalInstance에 삽입할 수 있을까요?
- 여기서 호출하는 컨트롤러는 Modal Instance 컨트롤러가 아니라 글로벌 컨트롤러입니다.
loginCtrl이게 문제인가요?loginCtrl을 서브클래스로 분류하거나 ModalInstanceCtrl에서 호출해야 합니까?그렇다면 어떻게 정확하게?
이에 대한 안내와 설명을 해주시면 감사하겠습니다.감사합니다!
질문은 명확하지 않지만 모듈 API를 사용하여 컨트롤러를 선언하면 컨트롤러를 모달서비스에 문자열로 제공할 수 있습니다.
myApp.controller('ModalInstanceCtrl', ['$scope', function($scope) { $scope.greeting = 'Hola!'; }]);
controller: 'ModalInstanceCtrl',
같은 방법으로 할 수 있다loginCtrl모드 서비스에서 사용하려면 이 옵션을 사용합니다.
저처럼 모범을 보이고 싶어하는 분들을 위해 이 플런커를 만들었습니다.글로벌 네임스페이스를 오염시키지 않고 모달(modal)을 작성하는 방법에 대해 설명합니다.도움이 되었으면 좋겠어요.
아래 범미의 코멘트에 따라 코드 예를 포함하도록 편집되었습니다.
index.displaces를 표시합니다.
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"> </script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="appController">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
<span>Message:{{message}}</span>
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="showModal()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
app.module
angular.module('app', ['ui.bootstrap']).
service('DataService', ['$rootScope',
function($rootScope) {
this.data = {};
this.data.message = 'This is a message from a service';
this.data.items = ['item1', 'item2', 'item3'];
}
]).
controller('myModal', ['$scope', '$modalInstance', 'DataService',
function($scope, $modalInstance, dataService) {
$scope.data = dataService.data;
$scope.message = dataService.data.message;
$scope.items = dataService.data.items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function() {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
}
]).
controller('appController', ['$scope', '$modal', '$log', 'DataService',
function($scope, $modal, $log, dataService) {
$scope.data = dataService.data;
$scope.showModal = function() {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'myModal'
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
}
]);
같은 문제가 발생하여 모듈 컨트롤러를 모듈에 추가하지 않고 다음과 같이 선언.
var ModalInstanceCtrl = ['$scope', '$modalInstance', 'items', function ($scope, $modalInstance, items) { ... }
다른 변경이 필요하지 않으므로 이 구문은 최소화와도 함께 작동합니다.
간단한 방법은 $inject를 사용하는 것입니다.
// 컨트롤러에 다음과 같은 종속성을 주입합니다.Modal Instance Ctrl.$syslog = ['$syslog', '$modal'인스턴스', '항목';
컨트롤러 방식을 이름 있는 함수로 변경합니다.
Modal Instance Ctrl 함수($scope, $modal)인스턴스, 항목) {$125.199 = 아이템;$140입니다.선택한 = {아이템: $128.204[0]};
$138.ok = 함수() {$모달Instance.close($scope).selected.item);
};
$126.199 = 함수 () {$모달Instance.dismiss('취소');
};};
저는 이 주제에 관한 블로그 기사를 썼고 $inject를 사용하는 지침에 대한 테스트 작성 방법을 포함하고 있습니다.
transition-to-first-2-0-part-2로의 이행
언급URL : https://stackoverflow.com/questions/19487259/the-correct-way-to-inject-an-angular-controller-dependency-inside-an-angular-ui
'programing' 카테고리의 다른 글
| 리액트를 사용하여 HTML 태그에 클래스를 추가하시겠습니까? (0) | 2023.04.05 |
|---|---|
| .htaccess, YSlow 및 "쿠키 프리 도메인 사용" (0) | 2023.04.05 |
| 스프링 부트 응용 프로그램에서 스레드 시작 (0) | 2023.04.05 |
| 예쁜이 사용 안 함Photo WordPress (Visual Composer (0) | 2023.04.05 |
| Python 2.5에서 사용할 수 있는 JSON 모듈은 무엇입니까? (0) | 2023.04.05 |