自定义指令调用问题

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; 
    } 
}; 
}); 

这个指令给定的格式将格式化值的货币，也将四舍五入小数点points.This指令工作正常，但我的问题开始时调用指令。我呼吁从视图这样

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

从数据库来的价格量被分配到“项”，它会被传入该指令的指令，这部作品在某些情况下，并得到格式化的价格值。 现在我的问题是

1. 在某些情况下，我得到空值（只是不格式化值$符号），而调用directive.But在这同一情况下，如果我硬编码了一些值项目（项目= 8888 ），那么它的工作原理。这个指令有什么问题？

2. 我认为这个指令不是双向绑定的，如果不是我该怎么做？

3. 调用指令后添加的标签不显示。我举一个例子

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

我想调用该指令在一个跨度，其中它显示了一个价格范围内，例如，

视图： - 价格范围：$ 1000 - $ 500

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

在这种情况下，我该如何传递两个值到'项目'在同一时间？ 是否有任何替代方法来实现这一目标？

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至传递至你的指令，你有2种可能：

• 就像你传递项目，你可以通过itemsMin="itemsMin"和 itemsMax="itemsMax"

• 或更好的你改变你的项目易变le to the object：

  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）既然你说的是价格在某些情况下，空和正常工作时，你硬编码，那么问题是用分贝响应。检查响应是否给予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: '=' 
} 

项目：“=”意味着它的双向从范围绑定，您还可以使用 “<”从一个范围的一种方式结合，或'@'用于从字符串中进行单向绑定。

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

变化

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

到

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

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