This might be an easy question for you guys but it got really difficult for a newbie like me. I have several divs which I create through ng-repeat, when I click over the div I wish to see a modal window with some content in it. Right now I am able to get the popup working and also the data, however the instead of the the modal window showing up inside the div, it is creating a div of its own. I am using the modal window as a separate module and injecting the same into my controller.
这对你们来说可能是一个简单的问题，但对于像我这样的新手来说确实很难。我有几个div通过ng-repeat创建，当我单击div时，我希望看到一个模态窗口，其中包含一些内容。现在，我可以让弹出窗口和数据正常工作，但是它不是显示在div中的模态窗口，而是创建自己的div。我使用模态窗口作为一个单独的模块，并将其注入到我的控制器中。
THE MAIN APP CONTROLLER
主要的应用程序控制器
var app = angular.module('MainApp', ['ngRoute','ui.bootstrap','mddmodal']);
app.controller('MddController',function ($scope, $interval, $modal, $log) {
$scope.showInfo = function (index) {
var exchangeCode = $scope.entries[index];
console.log( ">>>>>>> showInfo " + index );
$scope.open( 'sm', index );
}
$scope.hideInfo = function (index) {
var exchangeCode = $scope.entries[index];
/*$scope.modalInstance.dismiss('cancel');*/
}
$scope.items = [];
$scope.open = function (window_size, index ) {
console.log("Clicked on open +++++ " + window_size + " index " + index );
$scope.items.push( "index" + index );
$scope.modalInstance = $modal.open({
templateUrl: 'scripts/controllers/_mdd_modal_impl.html',
controller: 'ModalInstanceCtrl',
size: window_size,
resolve: {
items: function () {
return $scope.items;
}
}
});
};
PARTIAL VIEW
局部视图
<div class="padding-from-sides" >
<div class="row top-buffer" ng-show="dataLoaded">
<div ng-repeat="entry in entries" ng-model="entry" class="col-md-1" ng-click="showInfo($index)" ng-mouseleave="hideInfo($index)">
<!--{{entry.errors}}-->
<div square-draw component-id="entry.exchangeCode" component-name="entry.exchangeName" ></div>
</div>
</div>
</div>
</div>
MODAL HTML
模态HTML
<body ng-app='mddmodal'>
<div>
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<table>
<tr>
<td ng-repeat="item in items">
<li>
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</td>
</tr>
</table>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
<!-- <div ng-show="selected">Selection from a modal: {{ selected }}</div>-->
</div>
</body>
MODAL JS
模态JS
var mdd_modal = angular.module('mddmodal',['ui.bootstrap']);
mdd_modal.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
The problem that I am facing right now is the popup for the modal is getting created outside the ng-repeat div, How do I control the modal so that I can get the modal inside the ng-repeat div.
我现在面临的问题是模态的弹出窗口在ng-repeat div之外创建，我如何控制模态以便在ng-repeat div中获得模态。
For example :
例如:
<ng repeat div>
one entry of the square draw directive
modal on click
<close div>
Thanks in advance!
提前谢谢!
1 个解决方案
#1
0
Third party Apps are good at placing things in unexpected places. I use a third party popup (ColorBox) that creates 2 divs required for it to work, However in an ASP.NET Web App it places these elements outside the form. So to make the code work I had to add this per their FAQ, to relocate the offending div's:
第三方应用程序擅长把东西放在意想不到的地方。我使用一个第三方弹出框(ColorBox)来创建两个div，但是在ASP中。它把这些元素放在表单之外。为了让代码运行起来，我必须在他们的FAQ中添加这个，以重新放置违规的div:
$(document).ready(function () {
$("#colorbox, #cboxOverlay").appendTo('form:first');
});
Something similar may work for you.
类似的事情可能对你有用。
#1
0
Third party Apps are good at placing things in unexpected places. I use a third party popup (ColorBox) that creates 2 divs required for it to work, However in an ASP.NET Web App it places these elements outside the form. So to make the code work I had to add this per their FAQ, to relocate the offending div's:
第三方应用程序擅长把东西放在意想不到的地方。我使用一个第三方弹出框(ColorBox)来创建两个div，但是在ASP中。它把这些元素放在表单之外。为了让代码运行起来，我必须在他们的FAQ中添加这个，以重新放置违规的div:
$(document).ready(function () {
$("#colorbox, #cboxOverlay").appendTo('form:first');
});
Something similar may work for you.
类似的事情可能对你有用。