在angular指令中為輸入設置默認值

Question

我用一些輸入創建了一個Angular指令元素，根據元素的屬性，應將輸入設置為默認值。 這是指令：

.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> 

$ index是必需的，因為該表單位於帶角度的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”和id =“ gas2”。 Angular將進行雙向綁定，因為您具有ng-model。 使用ng-model時，Angular會將temp綁定到任何scope.temp。

因此，在稍后的代碼中，如果您像scope.temp ='some value'這樣更改temp，則該值會自動顯示在瀏覽器中，盡管您可能必須調用scope。$ apply（）或scope。$ digest（）。