ui-bootstrap角度模態解析和作用域值
[英]ui-bootstrap Angular modal resolve and Scope value
問題描述
我對angular較不熟悉，並且已將Bootstrap模態集成到我的項目中，但是我無法使用“ programcontroller”中的值。
我想從id_program“programcontroller”中的“ModalInstanceCtrl”控制器內。 我嘗試將其添加到RESOLVE中，但無法獲取數據。
我從“programcontroller”里成功“ModalInstanceCtrl”模式的控制器使用了該解決硬編碼數據。
但是由於我使用此代碼段獲取了id_prgram：
<input type="text" ng-hide=" true" ng-model="id_program" ng-init="id_program=item._id">
上面的代碼在ng-repeat塊中，並被填充。 我確實知道是由於異步導致此問題。
我已附上代碼供您參考。
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代碼在下面給出！！！
<!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>
請幫我這個家伙！！！！ 謝謝
2 個解決方案
解決方案1
0 2016-04-01 04:36:40
從中刪除ng-controller =“ ModalInstanceCtrl”
<script type="text/ng-template" id="myModalContent.html">
看看會發生什么。
解決方案2
0 已采納 2016-04-01 06:37:05
您甚至在對angular進行處理之前，嘗試訪問過濾器值。
這是解決方案
<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>
控制者
$scope.setFilter = function (filterValue) {
$scope.filter = filterValue;
}
這是Plunkr
希望這可以幫助！！
為什么不從ui-bootstrap模態控制器綁定到$ scope字符串值？
[英]Why won't binding to a $scope string value from a ui-bootstrap modal controller work?
Angular ui-bootstrap進度條，角度計時器不顯示值
[英]Angular ui-bootstrap progressbar with angular-timer not showing value
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.