如果我只有两个if条件,我怎么能做出指令呢? - Angular Js

时间:2017-02-20 07:59:29

标签: javascript angularjs directive

嗨,我有什么办法可以为这个html做出指示。我必须检查语言类型是arabic然后应用float:right如果语言类型为english则不应用任何内容。

<div ng-show="show_div">
  <div class="aa-properties-content-head mg-bt-10 font-size-13" ng-if="$root.lg_type =='en'">
    <div data-ng-repeat="variant in variants">
      <div class="col-md-{{columns}} col-sm-12 col-xs-12">
        <label for="text">{{variant.name}}:</label>
        <input type="text" name="variant_value{{$index}}" class="form-control" ng-model="variant.variant_value" ng-blur="search_category()" placeholder="{{$root.translated_labels.dashboard.enter}} {{variant.name}}" ng-minlength="2" ng-maxlength="30" required>
      </div>
    </div>
    <div class="col-md-{{columns}}">
      <label for="item_price">{{$root.tl['product-variant'].price}}:</label>
      <input class="form-control" name="price" ng-model="search_price" placeholder="{{$root.translated_labels.dashboard.item_price}}" ng-minlength="1" ng-maxlength="20" id="item_price" type="text" required>
    </div>
    <div class="col-md-{{columns}}" id="prod_type_dd">
      <label for="product_type_id">{{$root.tl.product.product_type_id}}:</label>
      <input type="text" ng-model="product_type_id" placeholder="{{$root.translated_labels.dashboard.select_type}}" uib-typeahead="producttype.id as producttype.name for producttype in producttype_data | filter:$viewValue | limitTo:4" typeahead-input-formatter="formatLabel($model)"
      class="form-control">
    </div>
  </div>


  <div class="aa-properties-content-head mg-bt-10 font-size-13" ng-if="$root.lg_type =='ar'">
    <div data-ng-repeat="variant in variants">
      <div class="col-md-{{columns}} col-sm-12 col-xs-12 float-right">
        <label for="text">{{variant.name}}:</label>
        <input type="text" name="variant_value{{$index}}" class="form-control" ng-model="variant.variant_value" ng-blur="search_category()" placeholder="{{$root.translated_labels.dashboard.enter}} {{variant.name}}" ng-minlength="2" ng-maxlength="30" required>
      </div>
    </div>
    <div class="col-md-{{columns}} float-right">
      <label for="item_price">{{$root.tl['product-variant'].price}}:</label>
      <input class="form-control" name="price" ng-model="search_price" placeholder="{{$root.translated_labels.dashboard.item_price}}" ng-minlength="1" ng-maxlength="20" id="item_price" type="text" required>
    </div>
    <div class="col-md-{{columns}} float-right" id="prod_type_dd">
      <label for="product_type_id">{{$root.tl.product.product_type_id}}:</label>
      <input type="text" ng-model="product_type_id" placeholder="{{$root.translated_labels.dashboard.select_type}}" uib-typeahead="producttype.id as producttype.name for producttype in producttype_data | filter:$viewValue | limitTo:4" typeahead-input-formatter="formatLabel($model)"
      class="form-control">
    </div>
  </div>
</div>

如何将controller的数据传递给指令?我已经从控制器加载数据,但我不知道如何在指令中传递它,然后再次将其传递给控制器​​。

1 个答案:

答案 0 :(得分:1)

你的意思是这样做?

.directive('alignmentBlock', function() {
  return {
    restrict: 'A',
    link: function(scope, elem, attr, ctrl) {
       if(scope.arabic)
         elem.css({'float': 'right'});
    }
  };
});

评估您是否更新布尔范围变量,无论用户是否切换到阿拉伯语/非阿拉伯语。

然后在HTML中你可以像这样使用这个指令:

<div alignmentBlock>
  <p>your text</p>
</div>