angularjs - directivas - La forma correcta de inyectar una dependencia de controlador angular dentro de un modal angular.ui
rootscope angularjs (4)
siguiendo a angular.ui El ejemplo modal muestra la modalInstance ModalIntanceCtrl que llama a ModalIntanceCtrl que luego se crea como una función:
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'');
};
};
Tengo 2 preguntas / problemas:
los documentos recomiendan crear un controlador de otra manera (debido a problemas de minificación), por ejemplo:
myApp.controller(''GreetingCtrl'', [''$scope'', function($scope) { $scope.greeting = ''Hola!''; }]);
Pero si creo el controlador de esta manera, ¿cómo podría Inyectarlo en la instancia modal?
- El controlador que llamo aquí no es un controlador de Instancia Modal sino mi
loginCtrlglobal, ¿es esto un problema? ¿Debería subclasificar de algún modo loginCtrl o llamarlo desde ModalInstanceCtrl? y si es así, ¿cómo exactamente?
Estaré contento por la guía y la aclaración sobre esto. ¡Gracias!
Su pregunta no es muy clara, pero si declara el controlador utilizando la API del módulo, puede proporcionar el controlador al servicio modal como una cadena
myApp.controller(''ModalInstanceCtrl'', [''$scope'', function($scope) { $scope.greeting = ''Hola!''; }]);
controller: ''ModalInstanceCtrl'',
Lo mismo se puede hacer para loginCtrl si desea usar eso en el servicio modal.
Tuve un problema similar y declare el controlador modal sin agregarlo al módulo, así:
var ModalInstanceCtrl = [''$scope'', ''$modalInstance'', ''items'', function ($scope, $modalInstance, items) { ... }
Sin otros cambios necesarios, esta sintaxis también funciona con la minificación.
La forma más sencilla de hacerlo es usar $ inject:
// inject the controller with the following dependencies ModalInstanceCtrl.$inject = [''$scope'', ''$modalInstance'', ''items''];
Cambia el método del controlador a una función nombrada:
function ModalInstanceCtrl($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''); }; };
He escrito un artículo de blog sobre este tema e incluye cómo escribir pruebas para directivas que usan $ inject:
He creado este plunker para aquellos de ustedes como yo, a quienes les gusta ver un ejemplo. Muestra cómo crear un modal sin contaminar el espacio de nombres global. Espero que sea útil.
Editado para incluir un ejemplo de código según el comentario de bummi a continuación
index.html
<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.js
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());
});
};
}
]);