Question

我正在尝试在Angularjs中创建一个简单的项目。在这里，我想创建一个指令来显示帖子中的图像。 <jssor-slider post="$ctrl.post"></jssor-slider>。

这是我的模板html。

<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
    <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
    <div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>

<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden;">
  <div data-ng-repeat="file in post.files" data-p="112.50" style="display: none;">
    <img data-u="image" ng-src="{{baseUrl + file}}" />
  </div>
</div>

<div data-u="navigator" class="jssorb01" style="bottom:16px;right:16px;">
    <div data-u="prototype" style="width:12px;height:12px;"></div>
</div>

<span data-u="arrowleft" class="jssora02l" style="top:0px;left:8px;width:55px;height:55px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora02r" style="top:0px;right:8px;width:55px;height:55px;" data-autocenter="2"></span>

这是我的角度指令：

angular.module('postDetail')
.directive('jssorSlider', [function () {
return {
    restrict: 'E',
    replace: true,
    templateUrl: 'post-detail/jssor-slider.template.html',
    scope: {
      post: '='
    },
    link: function (scope, element, attrs) {
        var jssor_1_SlideoTransitions = [
            [{ b: 5500, d: 3000, o: -1, r: 240, e: { r: 2 } }],
            [{ b: -1, d: 1, o: -1, c: { x: 51.0, t: -51.0 } }, { b: 0, d: 1000, o: 1, c: { x: -51.0, t: 51.0 }, e: { o: 7, c: { x: 7, t: 7 } } }],
            [{ b: -1, d: 1, o: -1, sX: 9, sY: 9 }, { b: 1000, d: 1000, o: 1, sX: -9, sY: -9, e: { sX: 2, sY: 2 } }],
            [{ b: -1, d: 1, o: -1, r: -180, sX: 9, sY: 9 }, { b: 2000, d: 1000, o: 1, r: 180, sX: -9, sY: -9, e: { r: 2, sX: 2, sY: 2 } }],
            [{ b: -1, d: 1, o: -1 }, { b: 3000, d: 2000, y: 180, o: 1, e: { y: 16 } }],
            [{ b: -1, d: 1, o: -1, r: -150 }, { b: 7500, d: 1600, o: 1, r: 150, e: { r: 3 } }],
            [{ b: 10000, d: 2000, x: -379, e: { x: 7 } }],
            [{ b: 10000, d: 2000, x: -379, e: { x: 7 } }],
            [{ b: -1, d: 1, o: -1, r: 288, sX: 9, sY: 9 }, { b: 9100, d: 900, x: -1400, y: -660, o: 1, r: -288, sX: -9, sY: -9, e: { r: 6 } }, { b: 10000, d: 1600, x: -200, o: -1, e: { x: 16 } }]
        ];

        var options = {
            $AutoPlay: true,
            $Idle: 2000,
            $ArrowNavigatorOptions: {
              $Class: $JssorArrowNavigator$
            },
            $BulletNavigatorOptions: {
              $Class: $JssorBulletNavigator$
            }
        };
        scope.baseUrl =  "http://localhost:8080/api/file/";

         element.ready(function() {
             var jssor_slider1 = new $JssorSlider$('jssor_1', options);
         });
    }
};
}]);

但是当我刷新页面时：我收到以下错误：

jssor.slider.debug.js:2 Slides html code definition error, there must be at least 1 slide to initialize a slider

我没有任何线索，我在网上找不到太多信息。有人可以帮帮我吗？提前谢谢！

解决方案

原因是因为html构成和来自服务器的数据传递之间存在滞后。解决方案是在发送数据时调用指令中的函数。

function PostDetailController($routeParams, PostService) {
    var self = this;
    this.baseUrl = "http://localhost:8080/api/file/";
    this.update = {};

    PostService.getPost($routeParams.postId).success(
        function(data) {
            self.post = data;
            self.update.update();
        });
    }


<jssor-slider post="$ctrl.post" update="$ctrl.update"></jssor-slider>

scope: {
      post: '=',
      update: '='
},
...
scope.update.update = function() {
  elem.ready(function() {
     var jssor_slider1 = new $JssorSlider$('jssor_1', options);
  });
}

jssor在角度JS中的ng-repeat下抛出错误

解决方案

0 个答案: