example - AngularJS pasa los datos al modo de arranque

plunker angularjs editor

Question

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>

Answer 1

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;
}]);
}());

Answer 2

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: ''<''
}

Answer 3

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
});
}

Answer 4

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.