example - AngularJS pasa los datos al modo de arranque
plunker angularjs editor (4)
Cuando usa resolver, el mapa se inyecta en el controlador dado.
Recomiendo que use un controlador diferente para manejar la funcionalidad modal ( separación de preocupaciones ).
También recomiendo usar la inyección de dependencia para apoyar la minificación del código. El paso 5 en el tutorial angular explicará esto.
Un ejemplo simplificado del controlador modal sería.
(function () {
''use strict'';
var app = angular.module(''App'');
app.controller(''musicDetailController'',
[''$scope'', ''$uibModalInstance'', ''items'',
function ($scope, $uibModalInstance, items) {
$scope.items = items;
}]);
}());
Creo que me estoy perdiendo algo, pero no sé qué.
Básicamente estoy tratando de pasar un objeto al modal como a continuación, pero en lugar de obtener el objeto pasado, me sale nulo ... así que creo que es un problema con el alcance, pero soy nuevo en Angular y necesito ayuda.
Controlador
app.controller("musicViewModel", function ($scope, $http, $location, $uibModal, $log) {
$scope.selected = null;
$scope.open = function (item) {
$scope.selected = item;
$log.info(''Open'' + $scope.selected); // get right passes object
var modalInstance = $uibModal.open({
templateUrl: ''myModalContent.html'',
controller: ''musicViewModel'',
size: ''lg'',
resolve: {
items: function () {
return $scope.selected;
}
}
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
Ver
<div class="row" ng-controller="musicViewModel">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I''m a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li>
{{ selected }} // always gets null
</li>
</ul>
</div>
</script>
</div>
No puedes pasar un objeto directamente.
He intentado todas las soluciones anteriores, pero no estaba realmente satisfecho. He resuelto el problema escribiendo un analizador simple que le permite pasar ambas strings
y objects
directamente al modal, a través de la función de resolución provista.
app.controller(''ModalController'', [''$uibModal'', ''$scope'', function ($uibModal, $scope) {
// Initialize $modal
var $modal = this;
// Open component modal
$modal.open = function (component, size, data) {
// Init modal
var modalInstance = $uibModal.open({
ariaLabelledBy: ''modal-title'',
ariaDescribedBy: ''modal-body'',
component: component,
size: size || ''md'',
resolve: parseResolve(data)
});
};
// Parse the resolve object
function parseResolve(data) {
if (typeof data === ''string'') {
return {
data: function() {
return data;
}
}
}
else if (typeof data === ''object'') {
var resolve = {};
angular.forEach(data, function(value, key) {
resolve[key] = function() {
return value;
}
})
return resolve;
}
}
}]);
Cuando usa cadenas
Modelo:
<button ng-click="$modal.open(''modalSomething'', ''md'', ''value''">
Click
</button>
Componente:
bindings: {
resolve: ''@''
}
Al usar objetos
Modelo:
<button ng-click="$modal.open(''modalSomething'', ''md'', {key1: value1, key2: value2})">
Click
</button>
Componente:
bindings: {
resolve: ''<''
}
Obtuve el siguiente código funcionando:
this.OpenModal = function() {
var modalInstance = $uibModal.open({
url: "/name?parameter=" + $scope.Object.ParamValue,
templateUrl: ''views/module/page.html'',
controller: myController
});
}
Te sugiero que pases el scope
de tu propio controlador en lugar de pasar el mismo controller
nuevamente, al hacerlo también puedes eliminar la resolve
.
var modalInstance = $uibModal.open({
templateUrl: ''myModalContent.html'',
scope: $scope, //passed current scope to the modal
size: ''lg''
});
De lo contrario, debe crear un nuevo controller
y asignarlo para modal
al abrirlo.