0

我有一个用 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 之前删除它（当控制器更改时）？

4

2 回答 2

2

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

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

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

更多信息在这里

如果您需要经常使用它，您可以创建一个功能/服务，如下所示。

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);
});
于 2014-06-01T15:05:26.507 回答
1

您可以尝试挂钩 $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);
});
于 2013-07-18T21:11:16.007 回答