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

这是一个sn-p，它显然不起作用，但它是为了显示我的代码。我没有放 CSS，因为它不相关。 但是如果有解决办法，可以用那个sn-p检查，把图片的绝对路径放在vm.ImgPath里面。

我确切地说，一切都在 uibmodal 的开头被调用，所以这不是忘记 ng-controller 或其他什么。 {{blocName}} 也为我工作。

Answer 1

您可以使用角度范围来动态更改 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 的方式来做