Javascript 为什么预加载的图像位于错误的模板中？

我正在我的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)
    });
 }
}

以下是我正在使用的两个模板：

父模板（这被注入指令）

缩写
TEI标签

子模板（该模板被注入控制器，而控制器又被注入指令）

我想做的事

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

取而代之的是什么

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

---

为什么？

我没有具体的答案，所以我只是做了一个评论，但看看指令作用域是如何控制的，因为我知道做对它有一些微妙之处。@Oliver感谢您的输入。我确实检查了

replace=true

和

scope=true

，据我所知，它们都是正确的。我没有具体的答案，所以我将此作为一个评论，但看看如何控制指令的作用域，因为我知道在正确处理指令的过程中有一些微妙之处。@Oliver感谢您的输入。我确实检查了

replace=true

和

scope=true

，据我所知，它们是正确的。

<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>

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