javascript - 带有 CSS 动画的动态 src 路径

Question

我尝试制作一个带有动态路径的img。常见的解决方案似乎是使用

 document.getElementById();

我这样做了，但遇到了一个问题:在加载 html 之前调用了我的 Controller ，并且出现错误，因为 id 没有引用任何内容。我理解了问题，解决方案似乎是

1) 将脚本放入

 <script> 

应答器位于页面下方。这应该可行，但我想在 Controller 中调用 getElementById() ，因为我想要执行的路径取决于参数(它实际上是 uibmodal 的 Controller )。因此，由于我无法将参数从 Controller 传递到 HTML 中的脚本应答器，因此它不再是解决方案。

2)我也尝试使用window.onload()，但是当我尝试时，onload函数根本没有被调用。此外，我记得尝试过这个，即使调用该函数，也为时已晚，因为 img 需要在动画中使用。

我有点精疲力竭，真的不知道该怎么办。我正在使用 Angular，因此我没有尝试基于 JQuery 的解决方案，但我认为它们没有理由比 window.onload 更相关。

有人知道如何解决这个问题吗？

(function() {
    'use strict';

    angular
        .module('objectifDtyApp')
        .controller('MyBadgeController',MyBadgeController);

            MyBadgeController.$inject = ['$uibModalInstance', '$state', '$stateParams', 'BadgeView', 'items', 'Lesson'];

            function MyBadgeController($uibModalInstance, $state, $stateParams, BadgeView, items, Lesson) {
            var vm = this;


            console.log(items);

            vm.blocName = items.title;
            vm.ImagePath = items.path;
            console.log(vm.ImagePath);

            window.onload = function(){
                console.log("called");
                var img =document.getElementById('ImgBadge');
                img1.src= vm.ImagePath;

            };


            function clear () {
                $uibModalInstance.dismiss('cancel');
            }

             vm.close = function() {

             $uibModalInstance.close(true);
             //$state.go('viewCourse', {id: $stateParams.idLesson});
             }
         }
    })();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div>
<div class="Badge_logo-demo">
    <img ng-click="vm.close()" src="" alt="Badge_logo" id= "ImgBadge" class="Badge_logo">
    <h2 class="Badge_byline" id="Badge_byline"> You successfully did the Block {{vm.blocName}} </h2>

</div>
</div>

这是一个片段，它显然不起作用，但它是为了显示我的代码。我没有放置 CSS，因为它不相关。但如果有解决方案，可以通过将图像的绝对路径放入 vm.ImgPath 中来检查该代码片段。

我精确地说，所有内容都是在 uibmodal 的打开时调用的，所以这并不是忘记 ng-controller 或其他什么。 {{blocName}} 也为我工作。

Answer 1

您可以使用 Angular 范围动态更改 js 文件、图像或 css 的 src。

这是我自己的 css 应用程序的示例:

<link data-ng-if="brand" rel="stylesheet" type="text/css" data-ng-href="css/app/brand/{{brand.type}}/brand.css" />

在上面的 Controller 中我们有一个属性:

$scope.brand = {type:"cocacola"}

然后，我们允许用户使用下拉列表操作该范围变量，并使用 ng-model="brand.type"进行设置

注意 data-ng-if="brand" 我们检查 Controller 是否已加载该属性。优点是你不需要使用基本的 JavaScript，但你可以用 Angular 的方式来实现