Я попытался сделать img динамическим путем. Общее решение, казалось, использовало
document.getElementById();
Я сделал это, но у меня возникла проблема: мой контроллер был вызван до того, как был загружен html, и я получаю сообщение об ошибке, потому что идентификатор ничего не имел в виду. Я понял проблему, и решения, казалось, были
1) Поместите скрипт в
<script>
на странице. Это должно работать, но я хочу вызвать getElementById() в моем контроллере, поскольку путь, который я хочу сделать, зависит от параметров (это фактически контроллер uibmodal). Следовательно, поскольку я не могу передать параметры с контроллера на скриптовый скрипт в моем HTML, это уже не решение.
2) Я также попытался использовать window.onload(), но когда я это пробую, функция onload не вызывается вообще. Кроме того, я помню, что пытался это сделать, и даже когда функция была вызвана, было слишком поздно, потому что img нужно использовать в анимации.
Я как бы не испугался и действительно не понимаю, что делать. Я работаю с угловыми, поэтому я не пробовал решение на основе 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-контроллер или что-то еще. {{BlocName}} работает и на меня.
Вы можете использовать угловую область для динамического изменения src ваших js файлов, изображений или css.
Это пример моего собственного приложения для 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, но вы можете сделать это угловым способом