运行 document.ready 有 angularjs 条路线

Question

我正在尝试运行使用 angularjs 中的路由从 Materialise 框架中调用函数 .parallax()。我已经为每个模板配置了命令 document.ready 但这不起作用。这只在第一次起作用。使 document.ready 调用 $('.test').test(); 之类的函数的最佳方法是什么？使用路线？我将等待！谢谢！

我的路线模板 HTML：

<!-- JS -->
<script type="text/javascript">
    $(document).ready(function(){
        $('.parallax').parallax(); //Run just in the first time
    };
</script>

<!-- Template -->
<div class="" ng-controller="homeCtrl">
...
</div>

控制器：

app.controller('homeCtrl', ['$scope', function($scope){

    //Ready
    angular.element(document).ready(function() {
        $('.parallax').parallax(); // Doesn't work
    });

}]);

谢谢！

Answer 1

显然，控制器中的代码将无法正常工作，因为这是一个单页应用程序，并且在加载控制器时，文档已经加载，脚本标记中的回调被调用。我想你可以创建一个像

这样的指令

App.directive('testJquery', function() {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      $(element).parallex();
    }
  };
});

和 html 就像，假设您的视差 class 元素存在于路线的每个视图中

<div class="parallex" test-plugin><div>

如果在 ng-view 之外有一个 div 并且你想在每次更改路线时调用元素上的视差或任何 testFuntion 那么你可以在你的主控制器中做什么（在这个元素在那里）

将指令更改为

App.directive('testJquery', function() {
return {
    restrict: 'A',
    scope:{
       runFunctionAgain:'='
    },
    link: function(scope, element, attrs) {
      $(element).parallex();
      scope.$watch('runFunctionAgain', function(){
           if(scope.runFunctionAgain){
               $(element).parallex();
               scope.runFunctionAgain = false;
           }
       })
    }
  };
});

并在指令中从控制器中获取参数

<div class="parallex" run-function-again="runFunctionAgain" test-plugin><div>

在控制器中

   scope.runFunctionAgain = true;
 $scope.$on('$routeChangeStart', function (event, next, current) {
    scope.runFunctionAgain = true;
 });

运行 document.ready 有 angularjs 条路线

Run document.ready with angularjs routes

angularjs

routes

angular-route-segment