Question

我可以将鼠标悬停在滑块div和＆＃34;复制图片网址＆＃34;选项是因为数据设置正确但滑块没有显示任何内容，它只是灰色空白。

如果我删除了类＆＃34;滑块，幻灯片＆＃34;，那么我的所有数据都会垂直弹出，但在使用＆＃34;滑块，幻灯片＆＃34;时不会类。

我在主要的Html中有这个：

         $(document).ready(function () {
              $('.slider').slider();
             });

我的示例Json数据，我通过GET请求获得了角度：

      cast: [
            {
                cast_id: 0,
                character: "Mark Watney",
                credit_id: "53e7e85e0e0a266f9a0029aa",
                id: 1892,
                name: "Matt Damon",
                order: 0,
                profile_path: "/eLAWpp5BLbTwjj35MbGzpL0QkWv.jpg"
            },
            {
                cast_id: 9,
                character: "Melissa Lewis",
                credit_id: "5466c78eeaeb8172820008e4",
                id: 83002,
                name: "Jessica Chastain",
                order: 1,
                profile_path: "/eyv98YlnRuOOUNCD1U6w2yZDRA2.jpg"
            },
            {
                cast_id: 11,
                character: "Annie Montrose",
                credit_id: "5497ab23c3a368054b0009b4",
                id: 41091,
                name: "Kristen Wiig",
                order: 2,
                profile_path: "/eqHjl70yPVAYcpYnqKk62a3pzDd.jpg"
            },
            {
                cast_id: 13,
                character: "Teddy Sanders",
                credit_id: "54a7fe92c3a3680c33001972",
                id: 8447,
                name: "Jeff Daniels",
                order: 3,
                profile_path: "/gai03gCu3DxMYxFympt7hUObpI5.jpg"
            }
          ]

现在我从角度设置此数据但滑块显示为灰色，我可以通过将鼠标悬停在灰色区域并复制图像网址来确认图像网址。但是div中没有显示任何内容。

       <div class="row card-panel" ng-show="castShow">
                <div class="slider">
                    <ul class="slides">
                        <li ng-repeat="act in actors.cast">
                            <img ng-src="http://image.tmdb.org/t/p/original{{act.profile_path}}">

                            <div class="caption" style="margin-top: 262px;margin-left:80px;">
                                <h5 class="indigo-text right-align" ng-bind="act.character"></h5>
                                <h6 class="white-text right-align" ng-bind="act.name"></h6>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

我正在获取并设置数据的angularJS代码：

      DetailsService.GetMovieCredits(mid).then(function (response) {
            var json = angular.fromJson(response);
            //var cast = json.cast;
            $scope.actors = json;
            $scope.castShow = true;
        }, function (response) {
        });

Answer 1

我找到了同样的工作。为什么我们不创建自定义事件并在获取强制转换响应时调度它？我们可以在同一个自定义事件上附加一个监听器，在监听器中我们可以调用$('.slider').slider();。

角度代码部分看起来像这样

DetailsService.GetMovieCredits(mid).then(function (response) {
        var json = angular.fromJson(response);
        $scope.actors = json;
        $scope.castShow = true;
        //Creating custom event for slider data loaded
        var event = document.createEvent('Event');
        event.initEvent('slider-ready',true,true);
        document.querySelector('.slider').dispatchEvent(event);
  }, function (response) {
    });

然后而不是打电话来自main.html的$(document).ready(function () {$('.slider').slider();}); 我们必须做这样的事情

$('.slider).on('slider-ready', function (e) {
            //Adding timeout as direct function call was not working 
            setTimeout(function(){
                 $('.slider').slider();
            },1);      
});

它对我有用。希望它有所帮助。我想出来的只是一个黑客。

使用Angular ng-repeat动态地将数据加载到materializecss滑块中

1 个答案: