窗口调整大小指令不起作用

Question

我在 AngularJS 中创建了一个自定义指令。代码如下：

var esscom = angular.module('esscom',['ngMaterial' ,'ngMessages','ui.bootstrap','ui.router']);


esscom.directive('resize',[function($window){
    return function($scope){
        console.log("Inside resize dir");
        angular.element($window).bind('resize', function() {
            console.log("Window resize");
            if( $window.innerWidth <= 960){
                console.log("Returning ess background");
                angular.element("#view").addClass('essbackground');
            }
            $scope.$apply();
        })
    };
}]);

HTML如下：

<div resize id="view">
    <h1>Resize this</h1>
</div>

这行不通。永远不会检测到调整大小事件。我做错什么了吗？

Answer 1

指令函数应该返回如下：

esscom.directive('resize',['$window',function($window){
    return {
        link:function($scope){
            console.log("Inside resize dir");
            angular.element($window).bind('resize', function() {
                console.log("Window resize");
                if( $window.innerWidth <= 960){
                    console.log("Returning ess background");
                    angular.element("#view").addClass('essbackground');
                }
                $scope.$apply();
            })
        }
    };
}]);

你需要注入$window。