2016-03-22 4 views
0

Вот общее представление о том, что я делаю:Пользовательские выберите директиву вне области видимости контроллера - генерируя пустой параметр

<html ng-app="myapp"> 
<head>...</head> 

<body> 

<select class="form-control" ng-model="change_group" change-group> 
    <!-- options loaded in from Symfony/twig --> 
    <option value='0'>lala</option> 
    <option value='1'>bla</option> 
</select> 

<div ng-view></div> 

</body> 
</html> 

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

myapp.directive('changeGroup', function() { 
    return { 
     restrict: 'A', 
     require: "ngModel", 
     scope: { }, 
     controller: function($scope) { 
      $scope.change_group = 0; 
     }, 
     link: function(scope, element, attrs, ngModel) {    
      ngModel.$viewChangeListeners.push(function() { 
       console.log('changed'); 
      }); 
     } 
    }; 
}); 

Когда я загрузить страницу, требуемый вариант (0) мерцает на долю секунды, а затем возвращается в пустой вариант.

Это то, что выглядит как выберите, после угловых вставок, впадающий вариант:

<select class="form-control ng-pristine ng-valid ng-isolate-scope ng-touched" ng-model="change_group" change-group=""> 
    <option value="? undefined:undefined ?"></option> 
    <option value="0">Public</option> 
    <option value="1">xil3</option> 
</select> 
+0

Что произойдет, если вы установите значение в функции ссылки вместо директивного контроллера? – Lex

+0

Он даже не мерцает (как в контроллере); поэтому кажется, что он не пытается его установить. – xil3

+0

Обновлен мой вопрос, чтобы проиллюстрировать, как выглядит элемент выбора, после того, как этот пустой параметр вставлен. – xil3

ответ

1

Инициализировать строку ; не число.

Также не используйте область; не изолировать область.

angular.module("app",[]).directive('changeGroup', function() { 
    return { 
     restrict: 'A', 
     require: "ngModel", 
     //Do not use isolate scope 
     //scope: {}, 
     controller: function($scope,$element) { 
      //Initialize to string 
      $scope.change_group = '1'; 
      //Not to a number 
      //$scope.change_group = 1; 
     }, 
     link: function(scope, element, attrs, ngModel) {    
      ngModel.$viewChangeListeners.push(function() { 
       console.log('changed'); 
      }); 
     } 
    }; 
}); 

DEMO on JSFiddle.

1

Снимите scope: {}, что и создает новую область изолят, и я думаю, что вы теряете переменную change_group области видимости.

+0

Я удалил это, но он все еще делает то же самое. – xil3

+0

Да, странно. Я сделал это, и он начал работать. Я тестировал его в JSFiddle. – Lex

+0

Могу ли я увидеть ваш JSFiddle? – xil3

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