安全应用(safeApply)是最佳实践吗?

5
我正在尝试更多地使用指令来应用最佳实践,但我对如何从指令中应用作用域值有一些疑问。
在此演示中,您可以看到如果单击“切换displayMenu”按钮,则div仍处于切换状态。如果切换指令代码中的7-8行:
```javascript //scope.displayMenu = !scope.displayMenu; $timeout(function(){ scope.displayMenu = !scope.displayMenu; }); ```
它会正常工作。我的问题是:这是最佳做法吗?或者有没有更好的方法来解决这个问题?
scope.yolo = function () {
    scope.ctrl.toggle(); // COMMENT ME
    //scope.ctrl.toggleApply(); // UNCOMMENT ME
};

致:

scope.yolo = function () {
    //scope.ctrl.toggle(); // COMMENT ME
    scope.ctrl.toggleApply(); // UNCOMMENT ME
};
显示菜单的div将切换关闭。
现在,问题是我被迫编写两个函数,一个带有"$scope.$apply",另一个没有,这显然不是明智的做法......除非我使用safeApply,例如:
 $rootScope.safeApply = function(fn) {
        var phase = this.$root.$$phase;
        if(phase == '$apply' || phase == '$digest') {
            if(fn && (typeof(fn) === 'function')) {
                fn();
            }
        } else {
            this.$apply(fn);
        }
    };

安全应用(safeApply)是最佳实践吗?如果不是,那么实现我想要的功能的最佳方法是什么?

1个回答

8

查看$$phase被认为是不良实践。从类似主题中,Angular的开发人员已经说过:

出于未来考虑,您不应使用$$phase。

推荐的最佳做法是使用$timeout$evalAsync,它们都推迟了代码的执行。本质上,这两个函数将在新的$digest周期中执行,因此您不必手动调用$apply。大多数情况下,如果您只需要在safeApply场景中更新一些代码,则可以使用$evalAsync。

scope.$evalAsync(function(scope) {
  // run the toggle function without caring if you're in the digest or not
  scope.ctrl.toggle();
});

你可以阅读本·纳达尔的这篇文章,了解JavaScript过程中不同函数的执行方式。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接