[英]ui-bootstrap Angular modal resolve and Scope value
I am relatively new to angular and I have integrated Bootstrap modal to my project but I am not able to use the value from "programcontroller". 我对angular较不熟悉,并且已将Bootstrap模态集成到我的项目中,但是我无法使用“ programcontroller”中的值。
I want id_program from "programcontroller" inside the "ModalInstanceCtrl" controller. 我想从id_program“programcontroller”中的“ModalInstanceCtrl”控制器内。 I tried adding it in the RESOLVE but I was not able to get the data. 我尝试将其添加到RESOLVE中,但无法获取数据。
I got the hardcoded data using the RESOLVE from "programcontroller" successfully inside "ModalInstanceCtrl" controller of modal. 我从“programcontroller”里成功“ModalInstanceCtrl”模式的控制器使用了该解决硬编码数据。
But since I get the id_prgram using this snipet: 但是由于我使用此代码段获取了id_prgram:
<input type="text" ng-hide=" true" ng-model="id_program" ng-init="id_program=item._id">
The above code is inside ng-repeat block and gets populated. 上面的代码在ng-repeat块中,并被填充。 I do know that it is because of asynchronous that causes the problem. 我确实知道是由于异步导致此问题。
I have attached the code for your reference. 我已附上代码供您参考。
catalogapp.controller('programcontroller', function ($scope, $uibModal, $log, $routeParams) {
$scope.id_program = "";
$scope.title_program = "";
$scope.filter_program = $routeParams.seasonId;
$scope.season_number = $routeParams.seasonNumber;
$scope.model = {
//got this from previous HTML page as routeparams
season_id : $routeParams.seasonId
}
$scope.animationsEnabled = true;
$scope.program_array = [
{
"_id" : "program:a8097ae943bdbd372906ea494ddecbf2",
"series" : "series:fcde9691e624ba50df9be71735f4bb14",
"title" : "title1",
"season" : "season:a6e4d728c316cdffa933490d4f538251",
},
{
"_id" : "urn:esp:hbo:program:testprogram20160310",
"title" : "title1",
"series" : "series:4f19358c7377482f1310e5cfa06c5bd2",
"season" : "season:a6e4d728c316cdffa933490d4f538251",
}
]
$scope.items = [
{
"title" : "title",
"_id" : "program:version:2541203f297f8f0d",
"shortTitle" : "shtitle",
"program" : "program:f555feb8dafc1bae42d",
},
{
"title" : "title2",
"_id" : "program:version:40a2313f297f8f0d",
"shortTitle" : "shtitle2",
"program" : "program:f55asfsa57927411bd6545feb8dafc1bae42d",
},
{
"title" : "title3",
"_id" : "program:version:403f297f8f0d",
"shortTitle" : "shtitle3",
"program" : "program:asdf5557927411bd6545feb8dafc1bae42d",
}
]
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
backdrop: 'static',
resolve: {
items1: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
}
});
catalogapp.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items1) {
$scope.items = items1;
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
HTML Code is given below!!!! HTML代码在下面给出!!!
<!doctype html>
<html>
<head>
<title>HBO ESP Console</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-route.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/main.css">
<script src="/controllers/programcontroller.js"></script>
</head>
<body style="background-color:#44484a">
<h2>Program List</h2>
<script type="text/ng-template" id="myModalContent.html">
<body ng-controller="ModalInstanceCtrl">
<div class="modal-header">
<h3 class="modal-title">Program Version</h3>
</div>
<div class="modal-body" style="float:left">
<ul ng-repeat="item in items" style="list-style-type:none">
<li class="image">
<button type="button" style="background-color: #555555" class="btn btn-default">
<img ng-src="http://icons.iconarchive.com/icons/atti12/tv-series-folder/512/Game-of-Thrones-icon.png" height="200" width="200" />
</button>
</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</body>
</script>
<div ng-controller="programcontroller">
<input ng-hide=" true" type="text" ng-model="filter_program"><br><br>
<p ng-hide=" true">Season_id: {{model.season_id}}</p>
<p style="font-size:18px">Season Number:{{season_number}}</p>
<div style="float:left">
<div style="float:left">
<ul ng-repeat=" item in program_array | filter : filter_program" style=" list-style-type:none;float:left">
<li class="image">
<input type="text" ng-hide=" true" ng-model="id_program" ng-init="id_program=item._id">
<input type="text" ng-hide=" true" ng-model="title_program" ng-init="title_program=item.title">
<button type="button" style="background-color: #555555" class="btn btn-default" ng-click="open('lg')">
<img ng-src="http://icons.iconarchive.com/icons/atti12/tv-series-folder/512/Game-of-Thrones-icon.png" height="200" width="200" />
</button>
<p>{{item.title}}</p>
{{id_program}}
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
PLEASE help me with this guys!!!!!! 请帮我这个家伙!!!! Thanks 谢谢
remove ng-controller="ModalInstanceCtrl" from 从中删除ng-controller =“ ModalInstanceCtrl”
<script type="text/ng-template" id="myModalContent.html">
and see what happens. 看看会发生什么。
You are trying to access the filter value even before angular has processed it. 您甚至在对angular进行处理之前,尝试访问过滤器值。
Here is the solution 这是解决方案
<ul ng-repeat="it in itm">
<li>
{{it._id}}
<input type="text" ng-hide="true" >
<button type="button" class="btn btn-default" ng-click="setFilter(it._id);open('lg')">Large modal --- {{it._id}}</button>
</li>
</ul>
Controller 控制者
$scope.setFilter = function (filterValue) {
$scope.filter = filterValue;
} }
Hope this helps!! 希望这可以帮助!!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.