AngularJS как использовать ng-модель внутри настраиваемого тега директивы, устанавливая контроллер динамически?

Question

Недавно я начал с Угловая, поэтому у меня есть некоторые вопросы.

Моя проблема:
Я создал директиву, в которой я буду использовать во многих «страницах» с различными контроллерами в каждой конкретной ситуации, например.
Теперь я могу настроить контроллер динамически, эта проблема решена!
Но в каждом экземпляре директивы я хочу определить, какая переменная должна быть изменена в контроллере, например, ng-model. Если я помещаю непосредственно в тег в шаблоне, он работает, но мне нужно его динамически.

ДИРЕКТИВА:

app.directive('mySelectPicker', function() { 
var ddo = {}; 
    ddo.restrict = 'E'; 
    ddo.templateUrl = 'js/directives/views/my-select-picker.html'; 

    ddo.scope = {}; 
    ddo.controller = "@"; 
    ddo.name = "controllerName"; 

    return ddo; 
}); 

MY-SELECT-PICKER.HTML:
OBS1: (нг-повтор прекрасно работает со значениями в массиве раз контроллеров) OBS2: Если я поместил ng-model в тег select, он будет работать, но будет статичным!

<select> 
    <option value="{{time.value}}" ng-repeat="time in times" >{{time.text}}</option> 
</select> 

CONTROLLER:

app.controller('MyController', function($scope, moment){ 
    $scope.times = []; //array with the options 
    $scope.val1 = ''; 
    $scope.val2 = ''; 
}); 

ИСПОЛЬЗОВАНИЕ Директиву:

<my-select-picker controller-name="MyController" **ng-model="val1"**></my-select-picker> 
<my-select-picker controller-name="MyController" **ng-model="val2"**></my-select-picker> 

В резюме, мне нужно определить ng-model в каждом <my-select-picker>, чтобы определить, что является переменной в контроллер. Как это возможно?

Answer 1

Вы создали изолированную область действия для своей директивы, поэтому вы не можете получить доступ к родительской области своей директивы контроллера, где размещен тег директивы, поэтому вам необходимо передать в список директив список опций &.

Не используйте ng-model в качестве атрибута, потому что нет никакого смысла для атрибута ues ng-model атрибута на элементе директивы, как его не входящего элемента. Вместо этого вы можете назвать этот атрибут как model & list, а затем определить, что model & list атрибут внутри вашей изолированной директивы. Это свойство будет использовать =, чтобы он мог легко выполнять двустороннюю привязку. Также вы можете использовать ng-options вместо ng-repeat вариантов рендеринга, потому что ng-options имеет возможность связывать объект с ng-model по выбору.

HTML

<my-select-picker list="times" controller-name="MyController" model="val1"></my-select-picker> 
<my-select-picker list="times" controller-name="MyController" model="val2"></my-select-picker> 

Директива

ddo.scope = { 
    model: '=', 
    list: '=' 
}; 

мой-выбрать-подборщика.html

<select ng-model="model" ng-options="l.value as l.text for l in list"></select>