Question

我刚刚开始使用Angularjs，并且在一些stackoverflow答案的帮助下，我使用Angularjs创建了一个图像回退指令。回退功能正在运行，但现在我想使用布尔值，我想在控制器中设置的变量，结合视图中的ng-show，指示是否使用了回退图像，或者是否加载了原始图像。我已多次更改我的代码，但它从未奏效.... （teamCtrl是一个独立的控制器，它可以工作，在这个问题上可以忽略，所以我没有包含代码。）

这是我的一部分：

<div class="thumbnail margin-bot-20px">
    <img ng-src="../img/team{{teamCtrl.selectedteam.id}}.jpg" myfallback-src="../img/onbekend.jpg" />
</div>
<div ng-controller="fallbackController as fbCtrl">
    <p>
        <a href="#" class="btn btn-primary btn-sm" role="button">Wijzig foto</a>
        <a href="#" class="btn btn-primary btn-sm" role="button" ng-show="fbCtrl.directivedummy">Verwijder foto</a>
    </p>
</div>

这是指令和指令的控制器：

(function () {
    'use strict';

    angular.module('PD.fallback', [])
        .directive('myfallbackSrc', myfallbackSrc);

    angular.module('PD.fallback')
        .controller('fallbackController', fallbackController);      

    function fallbackController()
    {
        this.directivedummy = false;
    };


    function myfallbackSrc()
    {
        var directive = {
            link: link
            //controller: fallbackController,   // controllerfunctie
            //controllerAs: 'vm'        // controllerAs-alias
            //bindToController: true
            //scope: {}

        };
        return directive;
    };

// 3. Link-function implementeren
    function link(scope, element, attrs)
    {
        element.bind('error', function()
        {
            scope.directivedummy = false;
            if (attrs.src != attrs.myfallbackSrc)
                attrs.$set('src', attrs.myfallbackSrc);
        });

        element.bind('load', function()
        {   
            if (attrs.src != attrs.myfallbackSrc)
                scope.directivedummy = true;
        });
    }

})();

所以我想在视图html中显示/隐藏一个按钮。成功加载src图像时，该按钮必须可见，并且在加载后备图像时必须隐藏该按钮。

希望有人可以帮助我？

Answer 1

假设您没有使用ControllerAs语法，则需要触发$ digest，因为绑定回调发生在Angular 之外

element.bind('error', function(){
            scope.$apply(function (){
              scope.directivedummy = false;
              if (attrs.src != attrs.myfallbackSrc)
                attrs.$set('src', attrs.myfallbackSrc);
             });
});

Angularjs从指令更新控制器变量并在视图中使用

1 个答案: