связывание информации в HTML-элементе

Question

У меня есть http.get, который возвращает массив приложений

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

Для каждого из них, я создать карту (пользовательские директивы ... думают, что Google теперь карты) и добавить загрузочный модальный для них. Идея заключается в том, что вы можете щелкнуть по каждой карте и получить дополнительную информацию об этом конкретном приложении.

В коде моего Модаля я хочу получить информацию о приложении (например, имя приложения). Поскольку это вне цикла 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, и поэтому я, вероятно, не подхожу к нему правильно.

Как вы подходите к этому?

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 в вашем примере.