AngularJS将数据传递给引导模式
Posted
技术标签:
【中文标题】AngularJS将数据传递给引导模式【英文标题】:AngularJS passing data to bootstrap modal 【发布时间】:2016-01-22 01:49:08 【问题描述】:我想我遗漏了一些东西,但不知道是什么。 基本上我试图将一个对象传递给下面的模态,但是我没有得到传递的对象,而是得到了 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>
【问题讨论】:
【参考方案1】:我建议你传递你自己控制器的scope
,而不是再次传递相同的controller
,这样做你也可以删除resolve
。
var modalInstance = $uibModal.open(
templateUrl: 'myModalContent.html',
scope: $scope, //passed current scope to the modal
size: 'lg'
);
否则您需要创建一个新的controller
并在打开它时为modal
分配该控制器。
【讨论】:
@PankajParkar 您能否提供后一种解决方案以提供控制器的示例?我很难让它发挥作用。这是我的相关问题:***.com/questions/35350463/… 我认为下面的答案应该对你有所帮助..无论如何我会调查的。【参考方案2】:当您使用解析时,地图被注入到给定的控制器中。
我建议您使用不同的控制器来处理模态功能 (separation of concerns)。
我还建议使用依赖注入来支持代码的缩小。 Angular 教程中的Step 5 将对此进行解释。
模态控制器的简化示例是。
(function ()
'use strict';
var app = angular.module('App');
app.controller('musicDetailController',
['$scope', '$uibModalInstance', 'items',
function ($scope, $uibModalInstance, items)
$scope.items = items;
]);
());
【讨论】:
是的,我同意你的看法。使用单独的控制器将允许正确管理代码。【参考方案3】:您不能直接传递对象。
我已经尝试了上述所有解决方案,但并不十分满意。我通过编写一个简单的解析器解决了这个问题,它使您能够通过提供的解析函数将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: '<'
【讨论】:
【参考方案4】:我得到了下面的代码:
this.OpenModal = function()
var modalInstance = $uibModal.open(
url: "/name?parameter=" + $scope.Object.ParamValue,
templateUrl: 'views/module/page.html',
controller: myController
);
【讨论】:
你应该提供更多关于你的答案如何解决问题的信息以上是关于AngularJS将数据传递给引导模式的主要内容,如果未能解决你的问题,请参考以下文章