HTML 元素中的绑定信息

Question

我有一个 http.get returns 一组应用程序

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

对于它们中的每一个，我都创建了一张卡片（自定义指令...想想 google 现在的卡片）并向它们添加一个 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...我正在寻找一种方法来 "bind" 应用程序名称到模式以便它知道它，但是不能看看有什么合适的。我是 Angular 的新手，因此我可能没有正确处理它。

你会如何处理这个问题？

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

Answer 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。

HTML 元素中的绑定信息

binding information in a HTML element

angularjs

angularjs-1.5