Пользовательская директива: выпадающее выбранное значение не привязано

Question

Я пытаюсь создать настраиваемую директиву для выпадающего элемента управления в AngularJS 1.4.4. Я могу обработать выбранное событие, но я не могу получить привязку для того, что выбрано в раскрывающемся списке.

Я хочу назвать это из разметки Html следующим образом.

<my-dropdown-list source="myList" destination="mySelection" /> 

Угловая js custom директива здесь.

(function() { 

var directive = function($compile) { 
    return { 
     restrict: 'E', 
     scope: { 
      model: '=source', 
      selectedValues: '=destination' 
     }, 
     controller: function($scope) { 

      $scope.onSelChange = function() { 
       alert('called'); 
       console.log($scope.selectedItem.Code, $scope.selectedItem.Name); 
      }; 
      // $scope.selectedItem is always undefined here. 


     }, 
     link: function ($scope, $elem) { 

      var rowHtml = 
      '<select ng-options="item as item.Name for item in model" ng-model="selectedItem" ng-change="onSelChange()"></select>'; 

      $elem.html(rowHtml); 
      $compile($elem.contents())($scope.$new()); 
     } 
    }; 
}; 
my.directive('myDropdownList', directive); 
})(); 

Я новичок в Угловое, так что это может быть что-то маленькое, что я пропустил здесь, но я не могу показаться, чтобы получить значение «SelectedItem»

Answer 1

Я выяснить это в AgularJS документе

Обратите внимание, что значение директивы select, используемое без ngOptions, равно всегда строка. Когда модель должна быть привязана к нестроковому значению , вы должны либо явно преобразовать его с помощью директивы (см. Пример ниже ), либо использовать ngOptions для указания набора параметров. Это , потому что элемент option может привязываться только к строковым значениям в .

Ссылка: https://docs.angularjs.org/api/ng/directive/select

Вы должны использовать ngRepeat для создания списка, как этот пост: Angularjs: select not updating when ng-model is updated