告诉 Angular 不要刷新视图答案

【问题标题】：Tell Angular not to refresh the view告诉 Angular 不要刷新视图
【发布时间】：2014-12-15 21:01:03
【问题描述】：

我正在构建一个 Angular 应用程序。

我需要监听onKeyDown 事件（尤其是ESC 事件）才能关闭侧边栏。但是当我这样做时，似乎每次按下的键都会刷新视图，这很烦人，因为我的页面上有随机颜色，每次都会改变。

index.html：

<body ng-keydown="onKeyDown">
    ...
</body>

在 js 中：

$rootScope.onKeyDown = function ($event) {
    if ($event.keyCode == 27) {
        $rootScope.sidebar = false 
    }
    /*
    else {
         //please don't refresh the scope
    }
    */
}

正常吗，如何避免angular在没有变化的情况下刷新页面？

【问题讨论】：

Angular 的最佳实践要求 ViewModel 属性的 getter 是快速且幂等的。每次有 $digest 循环时，您的随机颜色不应该刷新
@NewDev，我同意这不是最佳做法，但它是最快的做法：style="background: {{ color() }}"。我不知道该怎么做（它必须是js端，没有css）。
没关系。我的意思是color() 应该返回相同的值，而不管你调用它的次数。如果这不起作用，请创建另一个方法，例如 lastGeneratedColor()。
我目前的解决方案是：color() 只返回一个存储在列表中的随机字符串值，不执行任何其他操作。 return colors[Math.floor(Math.random() * colors.length)] 我会保持原样。谢谢！

标签： javascript angularjs angularjs-scope

【解决方案1】：

使用ngModelOptions 禁用在每次击键时触发 $scope 摘要的默认事件。

例如

// This disables the INPUT from triggering digests 
<input ng-model="someModel" ng-model-options="{updateOn:''}" ng-keydown="update($event)">

// manually check and trigger a $digest
$scope.update = function(e) {
  if(e.keyCode == 27) {
    $scope.$digest();
  }
}

如果您想在全局范围内执行此操作，则需要配置您的应用程序（而不是将 ng-model-options 应用于页面上的每个输入）。见AngularJS set global ngModelOptions。

当然有更优雅的解决方案可以做到这一点，但它们需要大量的源潜水和忍者技能。因此，人们对 Angular 感到沮丧。

【讨论】：

嗨@JohnSrickler，它似乎不起作用，因为我在 body 元素上做。这是我的身体标签：<body ng-model="lol" ng-model-options="{updateOn:''}" ng-keydown="onKeyDown">
这个版本也不行：<body ng-model="lol" ng-model-options="{updateOn:''}" ng-keydown="onKeyDown($event)">

【解决方案2】：

我没有使用ng-keydown attr，而是切换到在$document 上绑定keydown 事件app.run() 其中：

工作和
我认为在正文上添加ng-keydown 更干净。

$document.bind('keydown', function ($event) {
    if ($event.keyCode == 27) {
        $rootScope.sidebar = false;
        $rootScope.$digest()
    }
});

【讨论】：