重新评估从NG-重复内控制器的功能

Question

我有以下角度的代码：

<tr ng-repeat="vm in ..."> 
    <span ng-if="myLookupFunc(vm)"> {{myLookupFunc(vm)).label}}, {{myLookupFunc(vm).uuid}} 
    <span ng-if="!myLookupFunc(vm)">-</span> 
</tr> 

正如你可以看到myLookupFunc被称为4次为一个单个项目。 这是如何优化的，以便对于给定的'vm'实例只调用一次？ 我曾尝试在'tr'级别使用ng-init，但它在'vm'属性更改后不再重新评估 - 根据文档预计，根据文档ng-init不应该用于这种情况。

那么在angularjs中完成此操作的正确方法是什么？

Answer 1

请检查以下代码以获得更好的优化。

<tr ng-repeat="vm in ..." ng-init="lookupData=myLookupFunc(vm)"> 
    <span ng-if="lookupData"> {{lookupData.label}}, {{lookupData.uuid}} 
    <span ng-if="!lookupData">-</span> 
</tr> 

Answer 2

ng-init将在ng-repeat开始运行一次。这就是为什么它不会为你改变。

你必须使用控制器来获取可变数据，但你可以可以改善它。

一种方法是做这个控制器上：

function lookup(vm, firstRun) { 

    if (firstRun) { 
     $scope.lookupVar = myLookupFunc(vm); 
    } 
    else { 
     return $scope.lookupVar; 
    } 
} 

，然后你可以保持你的HTML代码几乎相同：

<tr ng-repeat="vm in ..."> 
    <span ng-if="lookup(vm, true)"> {{lookup(vm)).label}}, {{lookup(vm).uuid}} 
    <span ng-if="!lookup(vm)">-</span> 
</tr> 

更好的解决方案将只保留一个跨度在HTML中，然后做：

<tr ng-repeat="vm in ..."> 
    <span>{{getVmText(vm)}}</span> 
</tr> 

and def在控制器上检测VM值并返回文本的功能getVmText。我相信这是最好的方法。

Answer 3

使用数据模型并在必要时进行更新（即使发生“外部事件”时也是如此）。这样，您不必再为“重新评估控制器功能”而烦恼，它只是纯粹的角度数据绑定。

例子：

$scope.vms = ["id1", "id2", "id3"]; 

// this var will hold your data model (it could also be on the $scope, but for 
// demo let's leave it like this) 
var data = { 
    "id1": { 
    uuid: "123-123", 
    label: "label 1" 
    }, 
    "id2": { 
    uuid: "456-456", 
    label: "label 2" 
    }, 
    "id3": { 
    uuid: "abc-abc", 
    label: "label 3" 
    } 
}; 

$scope.myLookupFunc = function(id) { 
    return data[id]; 
}; 

然后你就可以使用它像这样：

<div ng-repeat="vm in vms" ng-init="lookupData=myLookupFunc(vm)"> 
    <span ng-if="lookupData"> {{lookupData.label}}, {{lookupData.uuid}}</span> 
    <span ng-if="!lookupData">-</span> 
</div> 

Plunker

Answer 4

确定，考虑了上述建议后，我发现了什么，我认为是最简单的解。

我们只需要运行

{{lookupData = myLookupFunc(vm)}} 

，之后大家可以参考 'lookupData' 变量。如果我们只是内联运行上面的代码，它也会评估并显示结果（作为JSON字符串化文本）内联，这不是我们想要的。所以，我结束了创建一个专用的指令，它是一个空操作指令：

app.directive("ngAssign", function() { 
    return { 
     restrict: 'A' 
    }; 
}); 

那么可以只说：

<tr ng-repeat="vm in ..." ng-assign={{lookupData = myLookupFunc(vm)}}> 
    <span ng-if="lookupData"> {{lookupData.label}}, {{lookupData.uuid}} 
    <span ng-if="!lookupData">-</span> 
</tr> 

完全plunker：http://plnkr.co/edit/34DwCGR7Po8zg2mnCAtB?p=preview