Установить переменную scope внутри функции $ window

Question

Я хочу установить $ scope.columns зависит от размера окна. Если оператор работает хорошо, но в функции $ window у меня нет доступа к переменным области видимости. Что я должен попробовать?

.controller("mainController", function($window, $scope) { 
 

 
    $window.onresize = function() { 
 
    var screenWidth = $window.innerWidth; 
 
    if (screenWidth < 1285) { 
 
     $scope.columns = 1; 
 
    } else if (1767 > screenWidth && screenWidth >= 1285) { 
 
     $scope.columns = 2; 
 
    } else if (2249 > screenWidth && screenWidth >= 1767) { 
 
     $scope.columns = 3; 
 
    } else if (2731 > screenWidth && screenWidth >= 2249) { 
 
     $scope.columns = 4; 
 
    } else if (3213 > screenWidth && screenWidth >= 2249) { 
 
     $scope.columns = 5; 
 
    } else if (screenWidth >= 3213) { 
 
     $scope.columns = 6; 
 
    } 
 
    } 
 
})

Answer 1

Вы определенно можете получить доступ к переменным $scope. Проблема в том, что событие $window.onresize не контролируется угловыми, поэтому изменения сделаны, но не отражены в пользовательском интерфейсе до следующего дайджест. Вы должны будете уведомить угловые об изменении, сделанном $scope.$apply(). Попробуйте следующее:

.controller("mainController", function($window, $scope) { 
    $window.onresize = function() { 
    $scope.$apply(function() { 
     var screenWidth = $window.innerWidth; 
     if (screenWidth < 1285) { 
     $scope.columns = 1; 
     } else if (1767 > screenWidth && screenWidth >= 1285) { 
     $scope.columns = 2; 
     } else if (2249 > screenWidth && screenWidth >= 1767) { 
     $scope.columns = 3; 
     } else if (2731 > screenWidth && screenWidth >= 2249) { 
     $scope.columns = 4; 
     } else if (3213 > screenWidth && screenWidth >= 2249) { 
     $scope.columns = 5; 
     } else if (screenWidth >= 3213) { 
     $scope.columns = 6; 
     } 
    }); 
    } 
}) 

Answer 2

Я считаю, что функция будет выполнена в окне рамки, когда срабатывает событие, вы можете попытаться установить область для атрибута контроллера, и привязать функцию к контроллеру:

.controller("mainController", function($window, $scope) { 
    this.scope = $scope; 
    $window.onresize = function() { 
    var screenWidth = $window.innerWidth; 
    if (screenWidth < 1285) { 
     this.scope.columns = 1; 
    } else if (1767 > screenWidth && screenWidth >= 1285) { 
     this.scope.columns = 2; 
    } else if (2249 > screenWidth && screenWidth >= 1767) { 
     this.scope.columns = 3; 
    } else if (2731 > screenWidth && screenWidth >= 2249) { 
     this.scope.columns = 4; 
    } else if (3213 > screenWidth && screenWidth >= 2249) { 
     this.scope.columns = 5; 
    } else if (screenWidth >= 3213) { 
     this.scope.columns = 6; 
    } 
    }.bind(this); 
})