Question

我正在Angular应用程序中预加载一些图像。我在这个指令里面这样做：

function keypadSlide(hotkeys, overlayConfig) {
var directive = {
    link: keypadSlideLink,
    controller: ['$scope', '$q', '$element', '$sce', keypadSlideController],
    replace: true,
    scope: true,
    templateUrl: 'overlay/keypad-slide.html'
};
return directive;

  function keypadSlideController($scope, $q, $element, $sce) {  
   $scope.abbreviations = overlayConfig.abbrKeys;      
    function preLoad() {
        function loadImage(src) {
            return $q(function (resolve, reject) {
                var image = new Image();
                image.onload = function () {
                    resolve(image);
                };
                image.src = src;
                image.onerror = function (e) {
                    reject(e);
                };
            })
        }
        var promises = $scope.abbreviations.map(function (imgObj) {
            return loadImage(imgObj.imgPath);
        });
        return $q.all(promises).then(function (results) {
            $scope.results = results;
            $scope.dynamicPopover = {
                templateUrl: 'overlay/keypad-img.html'
            }
        });
    }
    preLoad();
}

function keypadSlideLink(scope, elem, attrs) {
    scope.$watch('results', function (newVal, oldVal) {
        console.log(newVal, oldVal);
        if (!newVal) return;
        elem.append(newVal)
    });
 }
}

这些是我正在使用的两个模板：

父模板（这是注入指令）

<div class="keypad-slide" aria-label="Keypad">
    <div class="heading">
        <h3 class="title">Abbreviations</h3>
    </div>
    <div class="body">
        <div class="buttons">
            <div class="editing" role="group">
                <button popover-trigger="mouseenter" popover-placement="left" popover-title="{{abbreviation.tag}}" popover-template="dynamicPopover.templateUrl" class="button" ng-bind-html="toTrustedHTML(abbreviation.name)" ng-click="addTag(abbreviation.tag)" ng-repeat="abbreviation in abbreviations">
                </button>
            </div>
        </div>
    </div>
    <div class="heading">
        <h3 class="title">TEI tags</h3>
    </div>
    <div class="body">
        <div class="buttons">
            <div class="editing" role="group">
                <button class="button -tag" ng-bind="tag.name" ng-click="addTag(tag.tag)" ng-repeat="tag in tags"></button>
            </div>
        </div>
    </div>
</div>

子模板（将其注入Controller，然后将其注入指令）

<div class="form-group">
    <img ng-style="{'height':100}" ng-src="{{result.src}" ng-model="results" class="form-control" />
</div>

我正在尝试做什么

当用户将鼠标悬停在按钮上时，我想要的效果是将预加载的图像用作弹出框。

取而代之的是

正如您所看到的，图像在TEItags部分下方奇怪地显示，并且悬停在按钮上不会返回任何图像。

为什么吗

为什么预装图像在错误的模板中？

0 个答案: