Установка значений по умолчанию для входов в угловой директиве

Question

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

.directive('zoneType', ['$compile', function(){ 
    restrict: "E", 
    require: "^?ngModel", 
    templateUrl: "zone.html", 
    link: function(scope, element, attrs, ngModel){ 
     if(!ngModel) return; 

     var temp = 0; 
     var press = 0; 

     if(attrs.region=="top"){ 
      temp = 60; 
      press = 2; 
     }else if(attrs.region=="bottom"){ 
      temp = 20; 
      press = 0.4; 
     } 

     element.find("#gas1").val(temp); 
     element.find("#gas2").val(press); 

     ngModel.$setViewValue(element.html()); 
     ngModel.$render(); 
}]); 

и шаблон выглядит следующим образом

<form role="form" class="form-inline"> 
      <div class="form-group"> 
       <input placeholder="Gas1" id="gas1" class="form-control" type="number" ng-model="$root.zone[$index].gas1"/> 
      </div> 
      <div class="form-group"> 
       <input placeholder="Gas2" id="gas2" class="form-control" type="number" ng-model="$root.zone[$index].gas2"/> 
      </div> 
     </form> 

$ индекс необходим, потому что форма находится внутри углового Tabset.

я объявляю элемент, как этот

<zone-type region='top' ng-model='zone'></zone-type> 

Шаблон загружается правильно, но значения не установлены, это правильный способ сделать это?

Answer 1

Попробуйте это:

.directive('zoneType', ['$compile', function() { 
      restrict: "E", 
      require: "^?ngModel", // <<<<< don't know if you need this. 
      templateUrl: "zone.html", 
      link: function(scope, element, attrs, ngModel) { 
       scope.temp = 0; 
       scope.press = 0; 

       if (attrs.region == "top") { 
        scope.temp = 60; 
        scope.press = 2; 
       } else if (attrs.region == "bottom") { 
        scope.temp = 20; 
        scope.press = 0.4; 
       } 
      }]); 

И ваш HTML должен быть:

<form role="form" class="form-inline"> 
    <div class="form-group"> 
     <input placeholder="Gas1" id="gas1" class="form-control" type="number" ng-model="temp"/> 
    </div> 
    <div class="form-group"> 
     <input placeholder="Gas2" id="gas2" class="form-control" type="number" ng-model="press"/> 
    </div> 
</form> 

Вы действительно не нужно ID = "Gas1" и идентификатор = "gas2", если у вас есть необходимость используйте их в своем коде. Угловое будет делать двустороннюю привязку, потому что у вас есть ng-модель. При использовании ng-модели Angular свяжет temp с любым scope.temp.

Так что, если вы измените временные параметры, такие как scope.temp = 'some value', это значение отображается в браузере автоматически, хотя вам может потребоваться вызвать область. $ Apply() или scope. $ Digest().