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

Question

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

0

Я пытаюсь запустить функцию.parallax() из Materialize framework, используя маршруты в 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
    });

}]);

Благодарю!

Vinícius Biavatti 25 сен. 2016, в 19:21

Источник

0

Я использую Materialise CSS. забыла сказать
Vinícius Biavatti 25 сен. 2016, в 16:40
0

вы не ... вы помещаете этот код в директиву, поэтому код выполняется только после того, как элементы существуют. Код DOM не входит в контроллеры
charlietfl 25 сен. 2016, в 17:53

Теги:

angularjs

routes

angular-route-segment

1 ответ

Ещё вопросы

Я использую Materialise CSS. забыла сказать
вы не ... вы помещаете этот код в директиву, поэтому код выполняется только после того, как элементы существуют. Код DOM не входит в контроллеры

AbhiGoel · Accepted Answer · 2016-09-25T16-25-00.000Z

Очевидно, что код в контроллере не будет работать, так как это одностраничное приложение, и к моменту загрузки контроллера документ уже загружен и вызывается вызов в теге скрипта. Я думаю, вы можете создать такую директиву, как

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

а html - как, предполагая, что ваши элементы parallex класса присутствуют в каждом представлении маршрутов

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

Если есть один div, который находится за пределами ng-view, и вы хотите вызвать parallex или any 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;
 });