Question

我编写了一个自定义指令来格式化值，如下所示

var directiveapps = angular.module('myApp.currencyValues', []);
directiveapps.directive('currencyValue', function () {
return{
    scope: {
        data: '=items'
    },
    template: '<div>$ {{value|number}}</div>',
    link: function(scope){
      scope.value = Math.round(scope.data* 100) / 100;
    }
};
});

该指令将值格式化为货币，并且它将舍入小数点。此指令工作正常，但我的问题在调用指令时开始。我从像这样的视图中调用指令

<div class="overallsummary_meter_txt left">
  Total Price<br>
  <span currency-value items="totalPrice" class="orange_txt"></span>
</div>

来自数据库的价格金额被分配给“项目”并且它将被传递到指令，这在某些情况下有效并且获得格式化的价格值。现在我的问题是

在某些情况下，我在调用指令时得到空值（只有没有格式化值的$符号）。但在同样的情况下，如果我将一些值硬编码到项目（items = 8888），那么它可以工作。这个指令有什么问题？
我认为这个指令不是双向绑定，如果不是我怎么能这样做？
调用指令后添加的标签未显示。我举一个例子

<div currency-value items="downPayment">/Month</div> 此处“/月”未显示，但显示格式化的值。如何在调用指令后在同一个div中添加内容？

我想在显示价格范围的范围内调用此指令，例如

查看： - 价格范围：1000美元 - 500美元

<span class="price_range">{{maxMarcketPrcie}} - {{minMarcketPrice}}</span>

在这种情况下，我如何一次将两个值传递给'items'？有没有其他方法来实现这个目标？

Answer 1

1-我看到你的指令没有错。在下面的代码段中，我的例子没有太大变化。（仅controllerAs syntax替换范围变量）唯一的问题是，如果您只想对数字进行舍入，则可以使用filter代替指令。

2-项使用双向绑定。没什么奇怪的。也许控制器中存在导致错误的东西？

function currencyValue() {
  return{
      scope: {
          data: '=items'
      },
      template: '<div>$ {{value|number}}</div>',
      link: function(scope){
        scope.value = Math.round(scope.data* 100) / 100;
      }
  };
};
function MyController() {
  this.items = 123.666;
}

angular.module('myApp', []);
angular
    .module('myApp')
    .controller('MyController', MyController)
    .directive('currencyValue', currencyValue);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyController as ctrl" class="overallsummary_meter_txt left">
      Total Price<br>
      <span currency-value items="ctrl.items" class="orange_txt"></span>
    </div>
</div>

3-您要添加的“标签”由transclusion生成。您需要在指令中添加transclude: true和ng-transclude。它会将指令中的所有元素复制到模板中：

function currencyValue() {
  return{
      transclude: true,
      scope: {
          data: '=items'
      },
      template: '<div>$ {{value|number}}<span ng-transclude></span></div>',
      link: function(scope){
        scope.value = Math.round(scope.data* 100) / 100;
      }
  };
};
function MyController() {
  this.items = 123.666;
}

angular.module('myApp', []);
angular
    .module('myApp')
    .controller('MyController', MyController)
    .directive('currencyValue', currencyValue);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyController as ctrl" class="overallsummary_meter_txt left">
      Total Price<br>
      <span currency-value items="ctrl.items" class="orange_txt">/Month</span>
    </div>
</div>

4-要将范围传递给指令，您有两种可能性：

就像你传递的项目一样，你可以传递itemsMin="itemsMin"和 itemsMax="itemsMax"
或者您最好将items变量更改为对象：

this.items = {rangeFrom：1000，rangeTo：5000};

你的指令就变成了：

  return{
      transclude: true,
      scope: {
          data: '=items'
      },
      template: '<div>$ {{value.rangeFrom|number}} - $ {{value.rangeTo|number}}<span ng-transclude></span></div>',
      link: function(scope){
        scope.value = {};
        scope.value.RangeFrom = Math.round(scope.data.rangeFrom* 100) / 100;
        scope.value.RangeTom = Math.round(scope.data.rangeTo* 100) / 100;
      }
  };

Answer 2

1）由于您在某些情况下告诉价格是空的并且在您进行硬编码时工作正常，因此问题在于db响应。检查回复是否为totalPrice。

以下格式编写指令仍然更好：

directiveapps.directive('currencyValue', function () {
return{
    scope: {
        items: '='
    },
    template: '<div>$ {{value|number}}</div>',
    link: function(scope){
      scope.value = Math.round(scope.items* 100) / 100;
    }
};
});

并将其命名为

<div class="overallsummary_meter_txt left">
  Total Price<br>
  <span currency-value items="totalPrice" class="orange_txt"></span>
</div>

你所做的一样。

注意：在指令

中

scope: {
   items: '='
}

项目：'='表示从作用域双向绑定，您也可以使用 '＆lt;'用于从作用域进行单向绑定，或'@'用于从字符串进行单向绑定。

2）/月这不起作用，因为该指令将用其模板替换div内的内容。解决问题的最快方法是将内容移动到指令的模板中。像：

变化

template: '<div>$ {{value|number}}</div>',

到

 template: '<div>$ {{value|number}} /month</div>',

JFYI：我们还可以使用添加动态内容。

自定义指令调用问题

2 个答案: