Question

我有问题，我在Jquery中使用$(document).ready()，现在我想使用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'

请给我一个解决方法。

Answer 1

正如@ ste2425所说，从控制器操作DOM并不是一个好习惯，这可能就是你的问题。

不是在控制器中执行，而是应该从指令执行所有DOM操作。请查看AngularJS documentation about directives，并查看link (and post-link) functions，我认为您应该在那里进行操作。

添加到控制器angularjs而不是使用jquery ready函数

1 个答案: