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

Question

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

[HttpPost]
    public ActionResult Edit([Bind(Include = "Id,Text,Accepted,Description")] MyModel myModel)
    {
        if (ModelState.IsValid)
        {
            _db.Entry(myModel).State = EntityState.Modified;
            _db.SaveChanges();
            return RedirectToAction("Index");
        }
        return View(myModel);
    }

HTML如下：

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();
        })
    };
}]);

这不起作用。永远不会检测到resize事件。我做错了吗？

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。