0

Я видел несколько примеров в Интернете, а некоторые отвечали на вопросы здесь, в SO, но почему-то я не получаю двустороннюю привязку к моей настраиваемой директиве.угловая пользовательская директива двусторонняя переплетная проблема

Когда я изменяю входное значение, которое находится внутри шаблона моей директивы, ngModel не обновляется в области контроллера.

Вот что у меня есть:

Контроллер

$scope.tpcompl = "default value"; 
$scope.$watch('tpcompl', function(val) { 
    alert('value changed!'); 
}); 

Директива

.directive("panMdAutocomplete", function() { 
    return { 
     restrict: 'E', 
     scope: { 
      ngModel: '=panModel', 
      panLista: '=', 
      panLabel: '=', 
      panMaxlength: '=', 
      panFlex: '=' 
     }, 
     templateUrl: 'template.html', 
     link: function($scope, element, attrs){ 
      var sugereItem = function(termo) { 
       var valor = termo.toUpperCase().trim(); 
       var resultados = []; 
       for (var i=0;i<$scope.panLista.length;i++) { 
        var item = $scope.panLista[i]; 
        if (item.id.toUpperCase().indexOf(valor) !== -1) { 
         resultados.push({label:item.id, value:item.id}); 
        } 
       } 
       return resultados; 
      } 

      $scope.autocomplete_options = { 
        suggest: sugereItem 
      }; 
     } 
    } 
}); 

Шаблон

<span mass-autocomplete> 
    <md-input-container ng-class="{'md-input-has-value': ngModel}" flex="{{panFlex}}" style="position:static;"> 
     <label>{{panLabel}}</label> 
     <input type="text" ng-model="ngModel" ng-attr-maxlength="{{panMaxlength ? panMaxlength : ''}}" mass-autocomplete-item="autocomplete_options" class="md-input"> 
    </md-input-container> 
</span> 

и, наконец, HTML с пользовательской директивы

<pan-md-autocomplete pan-lista="tiposcompl" pan-label="'Complemento'" pan-maxlength="'8'" pan-flex="'25'" pan-model="tpcompl"></pan-md-autocomplete> 
+0

Что такое 'md-input-container'? и 'mass-autocomplete'? – Grundy

+0

в этом [plunker] (http://plnkr.co/edit/XSRiBTeTzpnO01we81qE?p=preview) все, похоже, работает. Можете ли вы изменить его, чтобы воспроизвести свою проблему? – Grundy

+0

Привет, Grundy и спасибо за ваш ответ! md-input-container является частью модуля углового материала и массового автозаполнения из автозаполнения с угловой массой. Я думаю, что проблема в том, что mass-auto-complete создает новую область и ломает поток модели. В любом случае, я изменил код и теперь буду использовать директиву автозаполнения углового материала. Я думал о том, чтобы настроить его, чтобы он соответствовал некоторым потребностям, но я думаю, что теперь это будет сделано. Еще раз спасибо! – Raphael

ответ

0

Я думаю, что проблема с контроллером Название переменной, как только передать переменную контроллера в качестве объекта, а не прямой переменной, как это,

$scope.tpcompl = { 
       value :"default value" 
        }; 

и HTML использования:

<pan-md-autocomplete pan-lista="tiposcompl" pan-label="'Complemento'" pan-maxlength="'8'" pan-flex="'25'" pan-model="tpcompl.value"></pan-md-autocomplete> 

Надежда это будет работать.

Смежные вопросы