Question

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

这是我到目前为止所做的事情：

http://jsfiddle.net/brettwick86/pt33te3z/3/

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 + ')';
  });
}

查看：

<div ng-controller="bgScroll">
  <nav class="navbar navbar-inverse navbar-bw navbar-fixed-top" role="navigation" style="background-color: {{ bgColor }};">
    ...
  </nav>
</div>

非常感谢任何帮助！

Answer 1

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

Answer 2

你应该避免在控制器中进行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');
      });
        }
    };
});

绑定窗口滚动AngularJS方式

2 个答案: