바인딩 윈도우가 AngularJS 방식으로 스크롤

Question

AngularJS newbie가 jQuery 배경과 함께 여기에 있습니다. AngularJS를 사용하여 윈도우 스크롤에서 투명에서 불투명으로 전환하는 배경을 가진 고정 톱 네비게이션을 개발하려고합니다. 그러나 창 스크롤을 $ 범위에 바인딩하는 데 문제가 있습니다.

는 여기에 지금까지 작동하지 않는이 작업은 다음과 같습니다

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 (포함될 때) 또는 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'); 
     }); 
     } 
    }; 
});