Question

我对角度相对较新，我已将Bootstrap模式集成到我的项目中，但我无法使用“programcontroller”中的值。

我希望“modalInstanceCtrl”控制器内的“programcontroller” id_program 。我尝试在 RESOLVE 中添加它，但我无法获取数据。

我在“ModalInstanceCtrl”模态控制器中成功使用来自“programcontroller”的RESOLVE获得了硬编码数据。

但是因为我使用这个snipet得到了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>

请帮助我这些家伙!!!!!!感谢

Answer 1

从

中删除ng-controller =“ModalInstanceCtrl”

<script type="text/ng-template" id="myModalContent.html">

看看会发生什么。

Answer 2

即使在角度处理之前，您也试图访问过滤器值。

这是解决方案

<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角度模态解析和范围值

2 个答案: