Question

我想对我的应用进行性能优化。我遇到了以下问题。让我有一个具有多个键的对象（在一个对象中不可更改）和一个类似于此的视图：

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

我本来想对我的属性使用一次性绑定，但如果我通过引用将控制器内的vm.model更改为另一个对象，那么我的表达式将不会在视图中更新，除非我做了一个显式的将模型更改为假值并以某种方式触发摘要周期，强制删除整个块然后重新编译。

有没有办法可以避免使用这3个冗余观察者，因为不应该监视这些属性，而只应该监视父对象引用。

Answer 1

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

试试这个

<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 根据我对您的问题的理解，该问题与AngularJS无关，但它关于JavaScript如何与传递给函数的引用一起工作。

在Is JavaScript a pass-by-reference or pass-by-value language?和以下简单示例上查看此帖子，我希望它能帮助您解决问题。

＆＃13;

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' }
  ];

＆＃13;

<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>

＆＃13;

对象属性的角度一次性绑定

2 个答案: