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（）。

将默认值设置为angular指令中的输入

1 个答案: