Question

我试图为AngularJS中的$ scope服务创建一些通常有用的扩展：

（此代码在所有控制器之外定义）：

var ExtendScope = function ($scope) {

    // safeApply is a safe replacement for $apply
    $scope.safeApply = function (fn) {
        var phase = this.$root.$$phase;
        if (phase == '$apply' || phase == '$digest') {
            if (fn && (typeof (fn) === 'function')) {
                fn();
            }
        } else {
            this.$apply(fn);
        }
    };


    // alertOn is shorthand for event handlers that must just pop up a message
    $scope.alertOn = function (eventName, message) {
        $scope.on(eventname, function () { alert(message); });
    };
};

第一个扩展程序safeApply()有效，但是当我在上面的代码中添加alertOn()时，即使未调用$scope.alertOn()，我的应用程序也不再有效。对于它的生命，我看不出我做错了什么。是不是很明显我的错误隐藏在明显的视线中？

Answer 1

如上所述

on -> $on 和

this.$apply(fn);

它应该是：

$scope.$apply(fn);

和

var phase = this.$root.$$phase;

应该是：

var phase = $scope.$root.$$phase; // or $scope.$$phase;

但是，我会重写你的代码以使用$ timeout，因为角度的摘要周期不是一成不变的。

$timeout(function() {
   // code to by "apply'ed" to be digested next cycle
});

Answer 2

我使用angular.extend解决了它，如下所示：

"use strict";


// Safely apply changes to the $scope
// Call this instead of $scope.$apply();

var ExtendScope = function ($scope) {

        angular.extend($scope, {
            safeApply: function (fn) {
                var phase = this.$root.$$phase;
                if (phase == '$apply' || phase == '$digest') {
                    if (fn && (typeof (fn) === 'function')) {
                        fn();
                    }
                } else {
                    this.$apply(fn);
                }
            },

            alertOn: function (eventName, message) {
                this.$on(eventName, function () { alert(message); });
            }
        });
};

所以现在在我的控制器中我可以简单地添加，例如，

$scope.alertOn('save_succeeded', "Saved.");

这有效！

感谢您的回答！

扩大$ scope

2 个答案: