带有 CSS 动画的动态 src 路径

Question

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

 document.getElementById();

我这样做了，但我遇到了一个问题：我的控制器在 html 加载之前被调用，我得到一个错误，因为 id 没有指代任何东西。我了解问题，解决方案似乎是

1) 将脚本放在

 <script>

页面下的应答器。这应该可行，但我想在我的控制器中调用 getElementById()，因为我想要执行的路径取决于参数（它实际上是 uibmodal 的控制器）。因此，由于我无法将参数从控制器传递到我的 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" />

在上面的控制器中我们有一个属性:

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

然后我们允许用户使用下拉菜单操作该范围变量，以使用 ng-model="brand.type"

进行设置

注意 data-ng-if="brand" 我们检查控制器是否加载了属性。优点是你不需要使用基本的 javascript 但你可以用 angular 的方式

带有 CSS 动画的动态 src 路径

Dynamic src path with CSS animation

javascript

dom

getelementbyid

css-animations

angularjs