угловой ремень модальный - проходная переменная в область модификации

Question

Как передать переменную в угловом ремне?

Необходимо передать item params в область модальности.

example.html:

<div class="container" ng-controller="ExampleCtrl"> 
    <br> 
    <div class="row"> 
     <div class="col-sm-9 col-sm-offset-1"> 
      <div class="row jumbotron" ng-repeat="item in items"> 
       <div class="col-sm-8"> 
        <h4>{{item.name}}</h4> 
       </div> 
       <div class="col-sm-2"> 
         <button type="button" class="btn btn-lg btn-danger" ng-click="showModal()">Custom Modal 
         <br /> 
         <small>(using data-template)</small> 
        </button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

---

example.controller.js:

'use strict'; 

angular 
    .module('MyApp') 
    .controller('ExampleCtrl', ['$scope', '$modal', 
     function ($scope, $modal) { 
     var modal = $modal({ 
      scope: $scope, 
      template: '../../views/example.tpl.html', 
      show: false 
     }); 
     $scope.showModal = function() { 
      modal.$promise.then(modal.show); 
     }; 
}]); 

Answer 1

Это не так ясно, что ваша проблема. $modal имеет по умолчанию ту же область действия, что и страница - ведь модальный - это просто элемент на этой странице.

Таким образом, scope: $scope совершенно незаурядный. Что же касается разметки, «передавая» переменный в $modal прямо вперед:

$scope.item = { name : 'Holy guacamole'}; 

«Святой гуакамол» будет показан в модальностях <h4>{{ item.name }}</h4>

Лично я предпочитаю, чтобы создать объект, посвященный определенный модальный:

$scope.myModalData = { 
    item : { 
     name : 'Holy guacamole' 
    } 
} 

<h4>{{ myModalData.item.name }}</h4> 

---

Если вы настаиваете использовать настраиваемую область, выполните следующие действия:

var $modalScope = $scope.$new(true); 
$modalScope.item = { 
    name : 'Holy guacamole'; 
} 

...

var modal = $modal({ 
    scope: $modalScope, 
    template: '../../views/example.tpl.html', 
    show: false 
}); 

...

<h4>{{ item.name }}</h4>