Javascript 绑定窗口以AngularJS方式滚动

AngularJS新手，有jQuery背景。使用AngularJS，我试图开发一个固定顶部导航栏，背景在窗口滚动上从透明过渡到不透明。但是，我无法将窗口滚动绑定到$scope

以下是迄今为止我所拥有的不起作用的东西：

视图：

...

---

非常感谢您的帮助

angular.element

委托给jQuery（包括它时）或JQlite，这意味着回调函数不会自动将更改应用到您的

$scope

function bgScroll($scope) {
  angular.element(window).bind('scroll', function () {
    $scope.scroll = window.pageYOffset;
    $scope.height = document.getElementById('main-header').offsetHeight;
    $scope.a = $scope.scroll / $scope.height;
    $scope.bgColor = 'rgba(0,0,0,' + $scope.a + ')';

    // Apply the changes to the scope here
    $scope.$apply();
  });
}

---

您应该避免在控制器中进行dom操作。相反，创建一个新的指令并在那里执行

enter code here


<div bg-scroll ng-controller="bgScroll">
  <nav class="navbar navbar-inverse navbar-bw navbar-fixed-top" role="navigation" style="background-color: {{ bgColor }};">
    ...
  </nav>
</div>   
myapp.directive('bgScroll', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            angular.element(window).bind('scroll', function () {
               scope.scroll = window.pageYOffset;
               scope.height = document.getElementById('main-header').offsetHeight;
               scope.a = scope.scroll / scope.height;
               scope.bgColor = 'rgba(0,0,0,' + scope.a + ')';
            });
scope.$on('$destroy', function() {
        angular.element(window).unbind('scroll');
      });
        }
    };
});

在此处输入代码
...
myapp.directive（'bgcroll'，function（）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
angular.element（window.bind（'scroll'，function（）{
scope.scroll=window.pageYOffset；
scope.height=document.getElementById（'main-header'）。offsetHeight；
scope.a=scope.scroll/scope.height；
scope.bgColor='rgba（0,0,0，'+scope.a+'）；
});
作用域.$on（“$destroy”，函数（）{
元素（窗口）。解除绑定（'scroll'）；
});
}
};
});

注意：

angular.element

仅在包含时才委托给

JQuery

，否则它使用的是angular的

JQlite

，这是JQuery的精简版本。@ryeballar在回答中反映感谢您的帮助。

$scope.$apply（）正是我所缺少的。我知道jQlite，但不理解$scope对象与angular.element的关系，因此回调解释很有帮助。在我的代码中，我认为DOM操作发生在视图中：
这不正确吗？
function bgScroll($scope) {
  angular.element(window).bind('scroll', function () {
    $scope.scroll = window.pageYOffset;
    $scope.height = document.getElementById('main-header').offsetHeight;
    $scope.a = $scope.scroll / $scope.height;
    $scope.bgColor = 'rgba(0,0,0,' + $scope.a + ')';

    // Apply the changes to the scope here
    $scope.$apply();
  });
}

enter code here


<div bg-scroll ng-controller="bgScroll">
  <nav class="navbar navbar-inverse navbar-bw navbar-fixed-top" role="navigation" style="background-color: {{ bgColor }};">
    ...
  </nav>
</div>   
myapp.directive('bgScroll', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            angular.element(window).bind('scroll', function () {
               scope.scroll = window.pageYOffset;
               scope.height = document.getElementById('main-header').offsetHeight;
               scope.a = scope.scroll / scope.height;
               scope.bgColor = 'rgba(0,0,0,' + scope.a + ')';
            });
scope.$on('$destroy', function() {
        angular.element(window).unbind('scroll');
      });
        }
    };
});