0

我对 AngularJS 还很陌生，所以请耐心等待。我正在尝试实现一个画廊滑块类型的应用程序，但我需要在所有图像加载之前加载页面并执行一些操作，因为它们非常大并且可能有很多图像。我试图通过承诺来做到这一点，它可以正常工作并重新调整我的 json 对象，但是当范围变量更改时，我看不到页面上的更新。考虑以下示例：

我的指令：

    iconic.directive('slider', function () {
    return {
        restrict: 'E',
        templateUrl: 'Home/_Slider',
        controller: 'SliderController'
    }
});

...注意我在指令中指定了控制器。这有效并从下面的控制器呈现我的测试变量。

我的控制器：

iconic.controller('SliderController', function ($scope, ImageFactory) {

    ImageFactory.getSliderImages()
        .then(function (result) {
            $scope.photos = result;
        });

    $scope.testvalue = 'test'

});

并且是图像工厂：

iconic.factory('ImageFactory',function ($http, $timeout, $q) {
    return {
        getSliderImages: function () {
            var dfd = $q.defer();
            $timeout(function () {
                dfd.resolve([
                    { url: 'http://placehold.it/1920x480', caption: 'Fancy sports picture1' },
                    { url: 'http://placehold.it/1920x480', caption: 'Fancy sports picture2' },
                    { url: 'http://placehold.it/1920x480', caption: 'Fancy sports picture3' },
                    { url: 'http://placehold.it/1920x480', caption: 'Fancy sports picture4' }
                ])
            }, 2000);
            return dfd.promise;
        }
    }
});

稍后我将通过 $http get 获取数据，但我只是将这些数据放入她的测试中。

和模板：

<div id="contentslider">
<!-- CONTENT -->
<ul class="contentSlider_list">
    <li>
        <img src="http://placehold.it/1920x480" width="1920" height="480" alt="" />
    </li>
    <li  data-ng-repeat="photo in photos">
        <img data-ng-src="{{ photo.url }}" width="1920" height="480" alt="" />
    </li>
</ul>

...请注意，添加第一个 li 只是为了查看它是否会呈现。

无论如何，当应用程序触发时，我会到达 $scope.photos = result 行，并且它有数据。但永远不要更新 dom。

4

0 回答 0