Angular 视图模板内容仅在鼠标悬停时更新 [英] Angular view template content updates only on mouse over

问题描述

我在使用带有控制器的 Angular 模板时有一个奇怪的行为.特殊视图内容通常仅在鼠标悬停时更新.我已经设置了一些 jsFiddles，但无法重现该问题.所以这显然是我的源代码中的一个错误.我在这里看到的唯一特别之处是我使用 $scope 方法来格式化和显示 HTML 内容.{{order.total()}} € 有时它会起作用，这很奇怪.

所有其他 HTML 部分都按预期更新.知道有什么问题吗?

$scope.order = {_总计:0，总计:函数(){返回 Globalize.format(this._total, "n");},职位:[]};$scope.addProductToCurrentOrder = function(packageIndex, productId) {无功 rs = {_id : 产品 ID};var tab = $scope.categories[packageIndex].packages;for (var i = 0; i 

<span class="btn btn-default btn-large">{{order.total()}} €</span>
<div data-id="{{package.productId}}" class="btn bt-default panel panel-default order order-card withripple" ng-click="addProductToCurrentOrder($parent.$index, package.productId)><div class="panel-body"><p class="lead">{{package.name}}</p><p>{{package.weight}} {{package.unit}}</p>

<div class="ripple-wrapper"></div>

解决方案

可能没有理由你的表达式不起作用，所以我会

• 删除 Globalize 函数调用，然后看看 Globalize 发生了什么.
• 在重新计算新的 Total 时计算 globalize 字符串.
• 使用 filter() 角度表达式计算全球化.

背后的图书馆是什么?

模拟全球化函数

var 全球化 = {格式:函数(a，b){返回 22；}};

http://jsfiddle.net/darul75/5L2d9y75/

I have a strange behavior using an Angular template with a controller . A special view content often updates on mouse over only. I have setup a few jsFiddles but cannot reproduce the problem. So it is obviously a mistake in my source code. The only special thing I see here is that I use a $scope method to format and display HTML content. {{order.total()}} € It is weird that it work sometimes.

All other HTML parts are updating as expected. Any idea what could be wrong?

$scope.order = {
  _total : 0,
  total : function() {
    return Globalize.format(this._total, "n");
  },
  positions: []
};


$scope.addProductToCurrentOrder = function(packageIndex, productId) {

  var rs = {
    _id : productId
  };


  var tab = $scope.categories[packageIndex].packages;
  for (var i = 0; i < tab.length; i++) {
    var pack = tab[i];
    if (pack.productId === productId){
      pack.quantity++;
      rs.articleName = pack.name;
      rs.price = pack.price;
      rs._price = pack._price;
      rs.unit = pack.unit;
      rs.weight = pack.weight;
      break;
    }
  }
  $scope.order.positions.push(rs);
  $scope.order._total += rs._price;
};

<h1>
  <span class="btn btn-default btn-large">{{order.total()}} €</span>
</h1>

<div data-id="{{package.productId}}" class="btn bt-default panel panel-default order order-card withripple" ng-click="addProductToCurrentOrder($parent.$index, package.productId)">
  	<div class="panel-body">
    	<p class="lead">  {{package.name}}</p> 
    	<p>{{package.weight}} {{package.unit}}</p>
      	</div>
	<div class="ripple-wrapper"></div>
</div>

解决方案

there might be no reason your expression not be working, so instead I will

• remove Globalize function call, then see what is going on with Globalize.
• compute globalize string when recomputing new Total.
• use of filter() angular expression to compute globalization.

What is the library behind ?

Mock Globalize function

var Globalize = {
  format : function(a,b) {
     return 22;   
  }
};

http://jsfiddle.net/darul75/5L2d9y75/

这篇关于Angular 视图模板内容仅在鼠标悬停时更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！