ng-if 的交换速度

Question

我试图让控件根据附近的复选框显示不同的值。我使用的代码与此非常相似：

(function (angular) {
  var module = angular.module('test', ['ngAnimate']);
  
  module.controller('TestCtrl', ['$scope', function ($scope) {
    $scope.profile = [
      { key: 'Prop1', value: 'test', localValue: 'test2', local: true },
      { key: 'Prop2', value: 'hello', localValue: 'world', local: false },
    ];
  }]);
  
})(angular);
        
angular.element(document).ready(function () {
  angular.bootstrap(document, ['test']);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.23/angular-animate.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<form data-ng-controller="TestCtrl">
  <div class="form-group" data-ng-repeat="prop in profile">
    <label class="control-label">{{prop.key}}</label>
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" data-ng-model="prop.local" />
      </span>
      <input class="form-control" type="text" readonly="readonly"
             data-ng-if="!prop.local" data-ng-model="prop.value" />
      <input class="form-control" type="text"
             data-ng-if="prop.local" data-ng-model="prop.localValue" />
      <span class="input-group-addon" data-ng-if="!prop.local">(inherited)</span>
    </div>
  </div>
</form>

当复选框被切换时，两个输入字段会在短时间内同时可见，从而导致不良的布局效果。它最终确实显示正确，但我希望消除滞后并让它们顺利交换。（我假设这是一个 JS 性能问题，与页面上有更多属性或页面上其他地方发生的更多其他内容有关。）

有没有一种方法可以重写它以获得预期的效果并提高性能？是否可以只交换绑定而不是整个控件？或者有人能想到其他可能导致延迟的原因吗？

Answer 1

目前我正在通过处理内部值而不是控件来解决这个问题：

(function (angular) {
  var module = angular.module('test', []);
  
  module.controller('TestCtrl', ['$scope', function ($scope) {
    $scope.profile = [
      { key: 'Prop1', inheritedValue: 'test', localValue: 'test2', local: true },
      { key: 'Prop2', inheritedValue: 'hello', localValue: 'world', local: false },
    ];
    
    $scope.initValue = function (prop) {
      prop.value = prop.local ? prop.localValue : prop.inheritedValue;
    }
      
    $scope.localise = function (prop) {
      if (!prop.local) {
        // save last local value when switching local -> inherited
        prop.localValue = prop.value;
      }
      $scope.initValue(prop);
    }
  }]);
  
})(angular);
        
angular.element(document).ready(function () {
  angular.bootstrap(document, ['test']);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<form data-ng-controller="TestCtrl">
  <div class="form-group" data-ng-repeat="prop in profile">
    <label class="control-label">{{prop.key}}</label>
    <div class="input-group" data-ng-init="initValue(prop)">
      <span class="input-group-addon">
        <input type="checkbox" data-ng-model="prop.local"
               data-ng-change="localise(prop)" />
      </span>
      <input class="form-control" type="text"
             data-ng-readonly="!prop.local"
             data-ng-model="prop.value" />
      <span class="input-group-addon" data-ng-if="!prop.local">(inherited)</span>
    </div>
  </div>
</form>

有点乱，但似乎效果更好。还是很好奇有没有更好的解决办法

Answer 2

这是由ngAnimate造成的。

要禁用动画，您需要在包含元素上禁用它们。

app.directive('disableAnimate', function ($animate)
{
    return function (scope, element)
    {
        $animate.enabled(false, element);
    };
});

您可以在容器上使用上述指令，它应该会禁用不需要的效果。

这是一个带有你的示例的 plnkr（没有效果和 ngAnimate）。

http://plnkr.co/edit/3rb4yI0qg9z7HRdmsrFG?p=preview

请注意，如果您删除该指令，即使在此 plnkr 中也会产生不良影响 :)

ng-if 的交换速度

Swapping speed of ng-if

javascript

twitter-bootstrap

angularjs

angular-ng-if