在Angular中以任何方式重新渲染或重新编译使用一次绑定的页面或整个页面的一部分?

时间:2015-10-06 06:44:04

标签: javascript angularjs

我们在页面上有多个列表可以包含数百个项目,因此出于性能原因,我们希望使用一次性绑定,只有当我们知道需要更新并且显着减少观察者数量时才会更新。

如果我们确实使用一次性绑定,有没有办法强制Angular重新渲染部分页面甚至整个页面?

1 个答案:

答案 0 :(得分:0)

所以我做了一些研究,似乎并不是本地的做法。我确实找到了这个可能的代码来帮助它可以工作,但是当我尝试它时,我使用的一些自定义第三方指令存在问题,但它可能适用于其他想做更简单事情的人:

https://gist.github.com/kentcdodds/739566ebd3609ac95e61

我发现的唯一功能似乎就是我正在寻找的是ng-if,正如我们所知道的,如果它从true变为false然后返回true,它将删除元素和所有角度/范围​​时#&# 39; s设置为false,然后在设置为true时重新编译并重新添加(是的,包括重新绑定一次绑定!)。

作为一种解决方案,我一直在努力解决这个问题,并将回顾它是如何进行的,但初步测试确实看起来很有希望。对这种方法的任何想法或评论也是受欢迎的。

更新

所以我确实设法让这个工作。 基本上你采取你想要重新编译和重新绑定的元素,并添加一个ng-if与某种" reset"像这样的变量:

<div id="dashboard-view" ng-if="reset">
  ... Some more code that includes one time bindings i.e. {{::store.name}}...
</div>

在您的控制器中:

angular.module('sampleApp')
  .controller('SampleCtrl',['$scope', function($scope){
    $scope.reset = true;

    $scope.dataUpdated = function(){
        $scope.store.name = "new name";
        $scope.reset = false;
        $timeout(function(){$scope.reset=true;},50);
    };
});

其中dataUpdate可以是导致数据更新的任何事件处理程序(例如,新对象的表单或更新现有对象的表单),您的按钮可以是

<input type="submit" ng-click=dataUpdated>

我不确定超时是否是最好的方法。当我尝试做$ scope.reset = false时; $ scope.reset = true;它没有用。也许可以尝试在它们之间注入$ scope。$ apply()。如果有人对此有任何意见,请告诉我。

但这样可行,因此所有内容都将被重新编译(并且还会被重新渲染),如果这些值发生了变化,那么#dashboard-view div中的任何一次绑定都将被重新绑定。

如果有人有更好的解决方案或方法,请随时回答。我希望这有助于其他人,我花了一段时间来提出这种方法。

更新2 所以我对ng-if的源代码进行了一些研究,并且有更高级的角度转换概念,所以如果有人对更纯粹的非hacky方式感兴趣,那么这将是一个很好的起点。 。