Bind window scroll the AngularJS way

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

Вы должны избегать манипуляции с домом в контроллере. Вместо этого создайте новую директиву и сделайте ее там.

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