0

我有一个返回应用程序数组的 http.get

 <div id ="app" ng-repeat="app in applications" >
<carddata-toggle="modal" data-target="#myModal" ></card>
        </div>

对于他们每个人，我都创建了一张卡片（自定义指令......想想谷歌现在卡片）并向他们添加一个引导模式。这个想法是您可以单击每张卡片并获取有关该特定应用程序的更多信息。

在我的模态代码中，我想检索有关应用程序的信息（例如应用程序名称）。由于这在 for 循环之外，Angular 已经丢失了我的应用程序名称，因此会引发错误。

  <div class="modal modal-fullscreen fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">{{app.name}} Status</h4>
        </div>

我已经通读了 angular Api ... 我正在寻找一种将应用程序名称“绑定”到模态的方法，以便它知道它，但看不到任何合适的东西。我是 Angular 的新手，因此我可能没有正确地接近它。

你会如何处理这个问题？

4

2 回答 2

2

我建议使用 Angular UI 的模态服务（看看https://angular-ui.github.io/bootstrap/#/modal）。

在你的控制器（你加载你的数组applications）中，注入$uibModal，例如

angular.module('myApp').controller('myCtrl', function ($scope, $uibModal) {
  $scope.applications = [];

  $scope.openModal = function(app) {
    $uibModal.open({
      controller: 'ModalInstanceCtrl',
      templateUrl: 'myModalContent.html',
      resolve: {
        app: function() {
          return app;
        }
      }
    });
  }
});

然后为模态本身定义控制器。

// This is the controller for the modal itself
// `app` being passed through the resolve parameter in $uibModal.open()

angular.module('myApp').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, app) {
  $scope.app = app;

  $scope.ok = function () {
    $uibModalInstance.close();
  };

  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
});

您可以通过在视图中添加以下内容来定义模态模板：

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title" id="modal-title">{{ app.title }}</h3>
    </div>
    <div class="modal-body" id="modal-body">
        Modal body content
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
    </div>
</script>

我已经避免了您在示例controllerAs中使用的语法。$scope

于 2016-11-30T21:28:25.463 回答
1

在你看来

<div id ="app" ng-repeat="app in applications" >
    <carddata-toggle="modal" data-target="#myModal" ng-click="setApp(app)"></card>
</div>


<h4 class="modal-title" id="myModalLabel">{{selectedApp.name}} Status</h4>

在您的控制器中

$scope.setApp = function(appParam){
    $scope.selectedApp = appParam;
}
于 2016-11-30T21:20:40.603 回答