Question

我有一个使用AngularJS构建的简单应用程序：

var App = angular.module('myApp', [], function($window) {
  // settings..
}).run(function($rootScope){
   $(window).on('resize', function(event) {
        $rootScope.$broadcast('windowResize',{
            height: event.target.innerHeight,
            width: event.target.innerWidth
        });
    });
});

我有一个指令panel，带有以下控制器：

function($scope, $element) {    
    var
        $title = $element.find('.panel-title'),
        $content = $element.find('.panel-content'),
        margin = 20
    ;
    $content
        .height($(window).height() - $title.height() - margin);

    $scope.$on('windowResize', function(obj) {
        var height = obj.height - $title.height()  - margin;
        $content.height(height);
    });
}

第一次完美无缺。但是，当控制器发生变化时，我会遇到像TypeError: Cannot read property '$$childHead' of null这样的问题，但我可以得到错误。

问题在于$scope.$on。如何在销毁$ scope之前删除它（当控制器更改时）？

Answer 1

$on函数返回注销函数。因此，您可以将该函数存储在变量中，然后在需要取消注册事件时调用该函数。

var deregisterWindowResize = $scope.$on('windowResize', function callback(args){...});

$scope.$on('$destory', deregisterWindowResize);

更多信息here

如果你需要经常使用它，你可以创建一个函数/服务，如下所示。

function weakBind(scope, eventName, callback){
    var deregister = scope.$on(eventName, callback);
    scope.$on('$destroy', deregister);
    return deregister;
}

weakBind($scope, 'windowResize', function(obj) {
    var height = obj.height - $title.height()  - margin;
    $content.height(height);
});

Answer 2

您可以尝试挂钩$ destroy事件，然后使用。$ off

例如：

var onWindowResize = function(obj) {
    var height = obj.height - $title.height()  - margin;
    $content.height(height);
});

$scope.$on('windowResize', onWindowResize);
$scope.$on('$destroy', function(){
    $scope.off('windowResize', onWindowResize);
});

AngularJS在销毁$ scope时不会删除$ scope。$ on

2 个答案: