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

这是由ngAnimate引起的。

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

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

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

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

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

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

Answer 2

目前，我通过处理内部价值而不是控制来解决这个问题：

＆＃13;

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

＆＃13;

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

＆＃13;

它有点麻烦，但似乎效果更好。如果有更好的解决方案仍然很好奇。

交换ng-if的速度

2 个答案: