example angularjs twitter-bootstrap angular-ui bootstrap-modal angularjs-controller

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.