[英]AngularJS passing data to bootstrap modal
I think I'm missing something but cannot figure what. 我想我缺少了一些东西,但无法弄清楚是什么。
Basically I'm trying to pass an object to the modal like below, but instead of getting the passed object I gets null...so I think is a problem with the scope but I'm new in Angular and need some help. 基本上,我试图将对象传递给模态,如下所示,但是我没有获取传递的对象,而是获取了null ...所以我认为范围存在问题,但是我是Angular的新手,需要帮助。
Controller 控制者
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;
};
});
View 视图
<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>
I'd suggest you to pass the scope
of your own controller instead of passing same controller
again, by doing that you can remove the resolve
also. 我建议您传递自己的控制器的
scope
,而不是再次传递相同的controller
,这样做也可以删除resolve
。
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
scope: $scope, //passed current scope to the modal
size: 'lg'
});
Otherwise you need to create a new controller
and assign that controller for modal
while opening it. 否则,您需要创建一个新
controller
并在打开它时为该控制器分配modal
。
When you use resolve, the map is injected into the given controller. 使用resolve时,映射将注入给定的控制器中。
I recommend that u use a different controller to handle the modal functionality ( separation of concerns ). 我建议您使用其他控制器来处理模态功能( 关注点分离 )。
I also recommend to use dependency injection to support minification of the code. 我还建议使用依赖注入来支持代码的精简。 Step 5 on the Angular tutorial wil explain this.
Angular教程的第5步将对此进行解释。
A simplified example of the modal controller would be. 模态控制器的简化示例将是。
(function () {
'use strict';
var app = angular.module('App');
app.controller('musicDetailController',
['$scope', '$uibModalInstance', 'items',
function ($scope, $uibModalInstance, items) {
$scope.items = items;
}]);
}());
You cannot pass an object directly. 您不能直接传递对象。
I've tried all the solutions above, but wasn't really satisfied. 我已经尝试了上述所有解决方案,但并不满意。 I've solved the issue by writing a simple parser that enables you to pass both
strings
and objects
directly to the modal, through the provided resolve function. 我已经通过编写一个简单的解析器解决了这个问题,该解析器使您可以通过提供的resolve函数将
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;
}
}
}]);
When usings strings 使用字符串时
Template: 模板:
<button ng-click="$modal.open('modalSomething', 'md', 'value'">
Click
</button>
Component: 零件:
bindings: {
resolve: '@'
}
When using objects 使用对象时
Template: 模板:
<button ng-click="$modal.open('modalSomething', 'md', {key1: value1, key2: value2})">
Click
</button>
Component: 零件:
bindings: {
resolve: '<'
}
I got the below code working: 我得到了下面的代码工作:
this.OpenModal = function() {
var modalInstance = $uibModal.open({
url: "/name?parameter=" + $scope.Object.ParamValue,
templateUrl: 'views/module/page.html',
controller: myController
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.