AngularJS transmettre des données à Bootstrap modal
Je pense que je manque quelque chose mais je ne peux pas comprendre quoi.
Fondamentalement, j'essaie de passer un objet au modal comme ci-dessous, mais au lieu d'obtenir l'objet passé, je reçois null...so je pense que c'est un problème avec la portée mais je suis nouveau dans Angular et j'ai besoin d'aide.
Contrôleur
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;
};
});
Vue
<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>
4 réponses
Je vous suggère de passer le scope de votre propre contrôleur au lieu de passer à nouveau le même controller, en faisant cela vous pouvez également supprimer le resolve.
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
scope: $scope, //passed current scope to the modal
size: 'lg'
});
Sinon, vous devez créer un nouveau controller et affecter ce contrôleur à modal lors de son ouverture.
Lorsque vous utilisez resolve, la carte est injectée dans le contrôleur donné.
Je vous recommande d'utiliser un contrôleur différent pour gérer la fonctionnalité modale(séparation des préoccupations).
Je recommande également d'utiliser l'injection de dépendance pour prendre en charge la minification du code. Étape 5 sur le tutoriel angulaire expliquer cela.
Un exemple simplifié du contrôleur modal serait.
(function () {
'use strict';
var app = angular.module('App');
app.controller('musicDetailController',
['$scope', '$uibModalInstance', 'items',
function ($scope, $uibModalInstance, items) {
$scope.items = items;
}]);
}());
Vous ne pouvez pas passer un objet directement.
J'ai essayé toutes les solutions ci-dessus, mais je n'étais pas vraiment satisfait. J'ai résolu le problème en écrivant un simple analyseur qui vous permet de passer à la fois strings et objects directement au modal, via la fonction de résolution fournie.
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;
}
}
}]);
Lorsque vous utilisez des chaînes
Modèle:
<button ng-click="$modal.open('modalSomething', 'md', 'value'">
Click
</button>
Composant:
bindings: {
resolve: '@'
}
Lors de l'utilisation de objets
Modèle:
<button ng-click="$modal.open('modalSomething', 'md', {key1: value1, key2: value2})">
Click
</button>
Composant:
bindings: {
resolve: '<'
}
J'ai obtenu le code ci-dessous de travail:
this.OpenModal = function() {
var modalInstance = $uibModal.open({
url: "/name?parameter=" + $scope.Object.ParamValue,
templateUrl: 'views/module/page.html',
controller: myController
});
}