2016-09-25 97 views
0

我想从Materialize框架中使用angularjs中的路由运行函数.parallax()。我已经为每个模板配置了命令document.ready,但这不起作用。这只是第一次。测试(); document.ready调用函数的最佳方法是什么?使用路线?我将等待!谢谢!用angularjs路径运行document.ready

我的路线的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 
    }); 

}]); 

谢谢!

+0

我使用Materialise的CSS采取从控制器参数的指令

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

在控制器中。我忘了说 –

+0

你不......你把代码放在指令中,所以代码只在元素存在后才运行。 DOM代码不属于控制器 – charlietfl

回答

0

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

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

和HTML一个指令是这样,假设你parallex类元素存在于路线的每个视图

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

如果有一个DIV它超出了NG-视图,并且希望每次改变路线,那么你可以在你的主控制器要做什么时间(在此元素是存在的)

更改指令

调用元素的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; 
      } 
     }) 
    } 
    }; 
}); 

而且

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