Question

我有一个简单的Angular应用程序，我正在设置它，所以当一个人点击一个图像时，会显示一条加载消息，然后当图像加载时，它会隐藏。

当我删除scope.loading = false;时，显示消息（显然），但是当我有该行时，即使图像需要5秒以上的加载时，也不会显示该消息。

有人能看出什么问题吗？

app.controller('ProductsCtrl', function($scope, $interval) {
    $scope.images = LayerData['images'];
    $scope.mainImage = '/open/img/'+$scope.images[0].section+'/'+$scope.images[0].file;
    $scope.loading = true;
    $scope.main = function(img) {
        $scope.mainImage = '/open/img/'+img.section+'/'+img.file;
    }
});

app.directive('imageonload', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                scope.$apply(function() {
                    scope.loading = false;
                });
            });

            scope.$watch(function () { return scope.mainImage; }, function (newValue) {
                if (newValue) {
                    scope.loading = true;
                    element.attr('src', scope.mainImage);
                }
            });

            element.attr('src', scope.mainImage);
        }
    };
});

相关的HTML就是这样，但是如果你需要/希望看到剩下的让我知道

<div class="row wrapper" ng-controller="ProductsCtrl">
    <div col>
        <div row>
            <div col>
                <h1>{$section.title}</h1>
            </div>
        </div>
    </div>



    {literal}
    <div col>
        <div row>
            <div col lg="7" md="7">
                <p ng-show="loading">Loading image...</p>
                <div id="mainImage">
                    <img ng-src="{{mainImage}}" imageonload style="max-width:100%;" />
                </div>
            </div>

            <div col lg="5" md="5">
                {/literal}
                {$sidebar}
                {literal}
            </div>
        </div>
    </div>
    <div col class="imgList">
        <div class="scrolls">
            <div class="imageDiv">


                    <img src="/assets/media/img/{{img.section}}/thumb-100-{{img.file}}" ng-click="main(img)" ng-repeat="img in images" />

            </div>
        </div>
    </div>
    {/literal}
</div>

这是使用Smarty和Angular的混合，这就是{literals}和{$ ...}的用途。

Answer 1

您在link指令的imageonload函数中绑定到Angular框架之外的浏览器DOM事件。

您需要通过发出$apply来通知Angular变量更新。

link: function(scope, element, attrs) {
    element.bind('load', function() {
        scope.$apply(function() {
            scope.loading = false;
        });
    });
}

修改

您在src指令绑定到加载事件之前绑定<img> imageonload属性。

<img ng-src="{{mainImage}}" imageonload style="max-width:100%;" />

相反，摆脱HTML中的ng-src声明并将其设置在imageonload指令中，您可以在其中确保首先绑定load事件。

像这样：

<img imageonload style="max-width:100%;" />

然后在绑定调用之后设置src应该有希望解决您的问题：

link: function(scope, element, attrs) { // Bind to load event (Same code as as above) // Set src attribute here *after* binding to the load event element.attr('src', scope.mainImage); }

Answer 2

我很确定你的问题是，这些指令有一个被称为＆＃34;隔离范围＆＃34;的东西。这意味着指令中link-function的范围不是你的控制器范围。

这意味着你的$ scope.loading变量永远不会被切换，你必须给你的指令修改你的控制器变量。

https://docs.angularjs.org/guide/directive 查看隔离范围上的部件并进行转换，这样可以加快速度。

很抱歉没有详细说明，如果您需要更多帮助，请给我发表评论。

干杯，Jan

变量似乎不会更新其价值

2 个答案: