重新評估從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