Добавьте к контроллеру angularjs вместо этого используйте функцию готовности jquery

Question

Добавьте к контроллеру angularjs вместо этого используйте функцию готовности jquery

0

У меня проблема, я использую $(document).ready() в JQuery, и теперь я хочу изменить его, используя angular.element(document).ready() Это мой код JQuery:

$(document).ready(function () {
  $(".bxslider").bxSlider({
      mode: 'fade',
      caption: true,
      auto: true,
      speed: 1000
  });
});

Это мой код в Angularjs:

angular.module('webApp')
  .controller('clientCtrl', function($scope) {
    $scope.init = function ()
    {
        angular.element(document).ready(function () {
            $(".bxslider").bxSlider({
                mode: 'fade',
                caption: true,
                auto: true,
                speed: 1000
            });
        });
    }

  })

И это код в Html:

<div class="our-clients" ng-controller="clientCtrl" ng-init="init()">
<ul class="bxslider">
    <li>
        <div class="col-md-2 col-sm-3 col-xs-4 client-logo">
          <a href=""><img src="images/kfc.png" alt="kfc" class="grayscale-logo-client" /></a>
                    </div>
        <div class="col-md-2 col-sm-3 col-xs-4 client-logo">
           <a href=""><img src="images/pixel.png" alt="pixel" class="grayscale-logo-client" /></a>
                    </div>
        <div class="col-md-2 col-sm-3 col-xs-4 client-logo">
            <a href=""><img src="images/country.png" alt="country" class="grayscale-logo-client" /></a>
                    </div>
        <div class="col-md-2 col-sm-3 col-xs-4 client-logo">
            <a href=""><img src="images/covex.png" alt="covex" class="grayscale-logo-client" /></a>
                    </div>
        <div class="col-md-2 col-sm-3 col-xs-4 client-logo">
            <a href=""><img src="images/book.png" alt="book" class="grayscale-logo-client" /></a>
                    </div>
      </li>
 </ul>

Мой слайдер все еще работает, но у меня появилось сообщение об ошибке: TypeError: Не удается прочитать свойство "childNodes" неопределенного

Пожалуйста, дайте мне способ решить эту проблему.

Vuong Tran 09 нояб. 2015, в 09:21

Источник

0

Это может быть потому, что angular еще не закончил рендеринг вашего контроллера. Я не делал никаких манипуляций с DOM в контроллере, поскольку это плохая практика, но я считаю, что ready событие запускается, тогда Angular делает это, изменяя DOM. Вы действительно должны поместить это в директиву. Тогда нет необходимости в ready мероприятии. Это также даст вам объект jquery тоже.
ste2425 09 нояб. 2015, в 08:22

Теги:

jquery

angularjs

1 ответ

Ещё вопросы

Это может быть потому, что angular еще не закончил рендеринг вашего контроллера. Я не делал никаких манипуляций с DOM в контроллере, поскольку это плохая практика, но я считаю, что ready событие запускается, тогда Angular делает это, изменяя DOM. Вы действительно должны поместить это в директиву. Тогда нет необходимости в ready мероприятии. Это также даст вам объект jquery тоже.

jjimenez · Answer 1 · 2015-11-09T05-57-00.000Z

Как сказал @ste2425, это не очень хорошая практика, чтобы манипулировать DOM с контроллера, и, вероятно, это ваша проблема.

Вместо того, чтобы делать это в контроллере, вы должны делать все манипуляции с DOM из директивы. Пожалуйста, взгляните на документацию AngularJS о директивах и посмотрите на функции ссылок (и пост-ссылок), где я думаю, что вам следует делать свои манипуляции.