Выберите в директиву с transclude не изменяя родительской области

Question

скрипку: http://jsfiddle.net/zorro/U8HpP/2/

Ниже код не работает. Если я удаляю transclude и шаблон, он работает так, как предполагалось. Что мне не хватает?

<div ng-app="example"> 
    <div ng-controller="TodoCtrl"> 
     <div ng-repeat="car in carsOwned"> 
      <h3>Owned car: {{car.brand}}</h3> 

      <div example-select ng-model="car"> 
       <select ng-model="car" ng-options="carType.brand for carType in carTypes"></select> 
       <p>Why doesn't the select alter the owned car?</p> 
      </div> 
     </div> 
    </div> 



function TodoCtrl($scope) { 

     $scope.carTypes = [{ 
      brand: 'BMW', 
      value: 'bmw' 
     }, { 
      brand: 'Mercedes', 
      value: 'me' 
     }, { 
      brand: 'Fiat', 
      value: 'fi' 
     }]; 

     $scope.carsOwned = [$scope.carTypes[0]]; 

    } 

    angular.module('example', []).directive('exampleSelect', function() { 
     return { 
      transclude: true, 
      scope: { 
       car: '=' 
      }, 
      link: function (scope, elm, attrs, ctrl) { 
       console.log('alive'); 
      }, 
      template: '<div ng-transclude></div>' 
     }; 
    }); 

Answer 1

Связывание с carsOwned[$index] вместо car работ:

<select ng-model="carsOwned[$index]" ng-options="carType.brand for carType in carTypes"></select> 

Но у вас будут проблемы, если несколько машин принадлежат, поскольку carsOwned может содержать дубликаты и разорвать ng-repeat. Чтобы это исправить, добавить отслеживание выражения:

<div ng-repeat="car in carsOwned track by $index"> 

Вот обновление вашей скрипке: http://jsfiddle.net/U8HpP/5/

Answer 2

ng-transclude создает дочернюю сферу, поэтому вам необходимо установить элемент объекта для того, чтобы получить доступ к родительской области переменной

---

EDIT

Для того, чтобы избежать необходимости пустой опция, размещенная в ваших опциях выбора, вам также необходимо установить начальное значение в соответствии с Why does AngularJS include an empty option in select?

---

<h3>Owned car: {{car.value.brand}}</h3> 

<div example-select> 
    <select ng-model="car.value" ng-options="carType.brand for carType in carTypes" ng-init="car.value=carTypes[0]"></select> 
</div> 

Updated Fiddle