javascript - 属性指令 scope.apply 在 ng-repeat 中使用时不起作用

Question

我正在使用一个属性指令来更新 DOM，一个名为 profileImage 的变量。属性指令称为 ppt-profile-icon，只要不在 ng-repeat 中就可以正常工作。我在 Stackoverflow 上查看了无数问题，但没有找到解决方案。

这是我的 HTML:

<div class="img-preview" ng-style="{'background-image': 'url(' + profileImage + ')'}"></div>


<ul class="dropdown-menu pre-defined-icons" uib-dropdown-menu role="menu" aria-labelledby="single-button">
    <li ng-repeat="predefinedImage in vm.predefinedImages">
        <a>
            <img ppt-profile-icon src="{{predefinedImage}}" width="100%" />
        </a>
    </li>

    <!--This, outside of the ng-repeat will work-->
    <li>
        <a>
            <img ppt-profile-icon src="content/img/people/noProfileIcon.svg" width="100%" />
        </a>
    </li>
</ul>

这是我的指令:

angular
    .module('app.core')
    .directive('pptProfileIcon', function ($timeout) {
        //link function for DOM Minipulation
        function linkFunction(scope, elem, attrs) {
            elem.bind('click', function () {
                scope.profileImage = attrs.src;
                scope.$apply();
            });

        }//end

        //Directive Declaration
        return {
            restrict: "A",
            controller: ['$scope', function ($scope) {
                //sets enviornment
            }],
            link: linkFunction
        }//end

    });//end

在我的 link 函数中，我尝试过:

attrs.$observe('src', function (val) {
    $timeout(function () {
        scope.profileImage = val;
        scope.$apply();
    });
});

$timeout(function () {
    scope.profileImage = attrs.src;
    scope.$apply();
});

Answer 1

问题是，指令中的 scope 是 ngRepeat 指令的范围，而不是父指令，因此您只在转发器中设置 profileImage .

我会选择可执行绑定(bind)

.directive('pptProfileIcon', function() {
    return {
        restrict: 'A',
        scope: {
            pptProfileIcon: '&'
        },
        link: function(scope, elem) {
            elem.on('click', function() {
                scope.pptProfileIcon({
                    profileImage: elem.prop('src')
                });
                scope.$apply();
            });
        }
    }
})

然后，在您的 Controller 范围内创建一个函数来设置图像

$scope.setProfileImage = function(image) {
    $scope.profileImage = image;
};

然后像这样设置你的模板

<img ppt-profile-icon="setProfileImage(profileImage)" ng-src="{{predefinedImage}}" />

Plunker 演示 ~ http://plnkr.co/edit/GqFXqZW5AmLCyWHblBDN?p=preview