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

假设你的parallex类元素存在于路径的每个视图中，

和html就好了，

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

如果有一个div在ng-view之外，并且你想在每次更改路径时调用该元素上的parallex或任何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;
 });

使用angularjs路由运行document.ready

1 个答案: