Question

我尝试用动态路径创建一个img。常见的解决方案似乎使用

 document.getElementById();

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

1）将脚本放在

中

 <script>

页面下的应答器。这应该工作，但我想在我的控制器中调用getElementById（），因为我想要做的路径取决于参数（它实际上是uibmodal的控制器）。因此，由于我无法将控制器中的参数传递给HTML中的脚本应用程序，因此它不再是解决方案。

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

我有点失去动力，真的不知道该怎么做。我正在使用angular，因此我没有尝试基于JQuery的解决方案，但我认为没有理由他们与window.onload更相关。

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

＆＃13;

(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});
             }
         }
    })();

＆＃13;

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

＆＃13;

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

我确切地说，在uibmodal的开头就调用了所有东西，所以它不是忘记控制器或其他什么。 {{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，但你可以采用角度方式

带有CSS动画的动态src路径

1 个答案: