HTML元素中的绑定信息

Question

我有一个http.get返回一系列应用程序

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

对于每个人，我创建了一张卡（自定义指令...想想Google Now Card），并在其上添加Bootstrap模式。您的想法是您可以单击每张卡并获取有关该特定应用的更多信息。

在我的模式的代码中，我想检索有关应用程序的信息（例如，应用程序名称）。由于这不在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的新手，因此我可能没有正确地接近它。

您将如何处理？

Answer 1

我建议使用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。

Answer 2

在您的 view

中

<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;
}