Winkel einmalige Bindungen für Objekteigenschaften

Question

Ich möchte Leistungsoptimierung meiner App vornehmen. Und ich stieß auf das folgende Problem. Lassen Sie mich ein Objekt mit mehreren Tasten (die innerhalb eines Objekts nicht veränderbar sind) und eine ähnliche Ansicht wie folgt aus:

<div ng-if="vm.model"> 
    <span>{{ vm.model.property1 }}</span> 
    <span>{{ vm.model.property2 }}</span> 
    <span>{{ vm.model.property3 }}</span> 
</div> 

ich gewollt hätte Einmal Bindungen für meine Eigenschaften zu verwenden, aber wenn ich vm ändern .model innerhalb des Controllers zu einem anderen Objekt durch Verweis, dann werden meine Ausdrücke nicht innerhalb der Ansicht aktualisiert, es sei denn, ich mache eine explizite Änderung des Modells zu einem falschen Wert und triggert irgendwie einen Digest-Zyklus, um den gesamten Block zu entfernen und dann neu kompiliert.

Gibt es eine Weise, die ich vermeiden kann diese drei redundanten Beobachter mit, da diese Eigenschaften nicht beobachtet werden sollen, sondern nur das übergeordnete Objekt zu verweisen.

Answer 1

https://docs.angularjs.org/guide/expression

Versuchen Sie, diese

<div ng-if="vm.model"> 
    <span>{{ ::vm.model.property1 }}</span> 
    <span>{{ ::vm.model.property2 }}</span> 
    <span>{{ ::vm.model.property3 }}</span> 
</div> 

Answer 2

@Alexey Katayev Basierend auf meinem Verständnis des Problems das Problem nicht mit AngularJS aber es ist ein Punkt, wie JavaScript arbeitet mit den Referenzen weitergegeben verwandt Funktionen.

Überprüfen Sie diesen Beitrag auf Is JavaScript a pass-by-reference or pass-by-value language? und das unten einfache Beispiel, ich hoffe, es wird Ihnen helfen, um Ihr Problem zu lösen.

angular 
 
    .module('demo', []) 
 
    .controller('DefaultController', DefaultController); 
 
    
 
    function DefaultController() { 
 
    var vm = this; 
 
    vm.model = data[0]; 
 
    
 
    vm.changeModel = changeModel; 
 
    
 
    function changeModel(model) { 
 
     model.property1 = data[1].property1; 
 
     model.property2 = data[1].property2; 
 
     model.property3 = data[1].property3; 
 
    } 
 
    } 
 
    
 
    var data = [ 
 
    { property1: 'Property 1', property2: 'Property 2', property3: 'Property 3' }, 
 
    { property1: 'Property 4', property2: 'Property 5', property3: 'Property 6' }, 
 
    { property1: 'Property 7', property2: 'Property 8', property3: 'Property 9' } 
 
    ]; 
 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demo"> 
 
    <div ng-controller="DefaultController as vm"> 
 
    <button type="button" ng-click="vm.changeModel(vm.model)">Change Model</button> 
 
    
 
    <div ng-if="vm.model"> 
 
     <span>{{ vm.model.property1 }}</span> 
 
     <span>{{ vm.model.property2 }}</span> 
 
     <span>{{ vm.model.property3 }}</span> 
 
    </div> 
 
    </div> 
 
</div>