Я думаю, что я что-то упускаю, но не могу понять, что. В основном я пытаюсь передать объект модальному, как показано ниже, но вместо того, чтобы получить переданный объект, я получаю null... поэтому я думаю, что это проблема с областью действия, но я новичок в Angular и вам нужна помощь.
контроллер
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;
};
});
Вид
<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>
Я бы предложил вам передать scope вашего собственного контроллера вместо того, чтобы передавать тот же самый controller, тем самым вы также можете удалить resolve.
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
scope: $scope, //passed current scope to the modal
size: 'lg'
});
В противном случае вам нужно создать новый controller и назначить этот контроллер для modal при его открытии.
Когда вы используете решение, карта вводится в данный контроллер.
Я рекомендую использовать другой контроллер для обработки модальной функциональности (разделение проблем).
Я также рекомендую использовать инъекцию зависимостей для поддержки минимизации кода. Шаг 5 в учебнике Angular, объясните это.
Упрощенный пример модального контроллера будет.
(function () {
'use strict';
var app = angular.module('App');
app.controller('musicDetailController',
['$scope', '$uibModalInstance', 'items',
function ($scope, $uibModalInstance, items) {
$scope.items = items;
}]);
}());
Вы не можете передать объект напрямую.
Я пробовал все вышеперечисленные решения, но на самом деле не был удовлетворен. Я решил проблему, написав простой синтаксический анализатор, который позволяет передавать как strings, так и objects непосредственно в модальный через предоставленную функцию разрешения.
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;
}
}
}]);
При использовании строк
Шаблон:
<button ng-click="$modal.open('modalSomething', 'md', 'value'">
Click
</button>
компонент:
bindings: {
resolve: '@'
}
При использовании объектов
Шаблон:
<button ng-click="$modal.open('modalSomething', 'md', {key1: value1, key2: value2})">
Click
</button>
компонент:
bindings: {
resolve: '<'
}
Я получил код ниже:
this.OpenModal = function() {
var modalInstance = $uibModal.open({
url: "/name?parameter=" + $scope.Object.ParamValue,
templateUrl: 'views/module/page.html',
controller: myController
});
}