Запустить document.ready с маршрутами angularjs

Question

Я пытаюсь запустить функцию .parallax() из структуры Materialize, используя маршруты в angularjs. Я уже настраиваю команду 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 быть как, предполагая, что ваши Parallex элементы класса присутствуют в каждом представлении маршрутов

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

Если есть один DIV, который находится за пределами нг-вид, и вы хотите, чтобы вызвать 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; 
});