0

アプリケーションの配列を返す http.get があります

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

それらのそれぞれについて、カード（カスタムディレクティブ... google nowカードを考えてください）を作成し、それらにブートストラップモーダルを追加します。次に、各カードをクリックして、その特定のアプリに関する詳細情報を取得できるという考えです.

Modal のコードで、アプリに関する情報 (アプリ名など) を取得したいと考えています。これは 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）で、 inject $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 に答える