html - How to change angular ng-init attributewith jquery -
so, have div image want change gif when specific scroll has occurred...
here html:
<div class="col-xs-6 mitad" ng-init="varname='images/estandar/impresoraestandaranimada.gif'" id="seccion3b"> <img ng-src="{{varname}}" id="gif"> </div>
now, idea is, change url in varname... tried didn't work:
if ($(window).width() > 1700 && vistaestandar.scrolltop > 1596 && vistaestandar.scrolltop < 2490) { lore: 'url(../images/estandar/monitorveloz1.gif)'; $("#gif").attr("ng-src", "{{lore}}"); }
any idea how make work?? don't understand angular (new @ programming) , if try change without angular replacing src attribute img tag, gif loads first time if enter again in if condition or if refresh website, loads static image
updated:
all js code inside controller already:
app.controller('estandarctrl', function ($scope, $rootscope, $routeparams, $location, $http, data) { $(document).ready(function(){ // ----clases para mantener los colores del header $(".navbar-header").addclass("fondoheader"); $("#fondomenu").addclass("fondoheader"); $("#footer").removeclass("esconder"); $("#social").removeclass("esconder"); $(".navbar-brand").removeclass("esconder"); $("#botonvideo").removeclass("fondoboton"); $("#vista").removeclass("barravista"); // ----propiedades para los scrollbar var vistaestandar = document.getelementbyid('vista'); vistaestandar.style.overflow= "auto"; vistaestandar.style.overflowx= "hidden"; vistaestandar.style.height = 100 + "%"; $("#vista").smoothwheel(); // ---animaciones para diferentes resoluciones vistaestandar.onscroll = function() {animacionesestandarvista()}; function animacionesestandarvista() { if (($(window).width() > 1700 && vistaestandar.scrolltop > 1596 && vistaestandar.scrolltop < 2490) || ($(window).width() > 1700 && document.documentelement.scrolltop > 1596 && document.documentelement.scrolltop < 2490)){ } else if (($(window).width() > 1700 && vistaestandar.scrolltop > 3888 && vistaestandar.scrolltop < 4286) || ($(window).width() > 1700 && document.documentelement.scrolltop > 3888 && document.documentelement.scrolltop < 4286)) { document.getelementbyid("section6").style.background = "url(images/estandar/monitorestandarentrada.gif)"; document.getelementbyid("section6").style.backgroundsize = "cover"; document.getelementbyid("section6").style.backgroundposition = "bottom"; } else if (($(window).width() > 1700 && vistaestandar.scrolltop > 4450) || ($(window).width() > 1700 && document.documentelement.scrolltop > 4450)) { document.getelementbyid("section6").style.background = "url(images/estandar/monitorestandarsalida.gif)"; document.getelementbyid("section6").style.backgroundsize = "cover"; document.getelementbyid("section6").style.backgroundposition = "bottom"; } else { } }); });
so have controller partial
on html element aka scroll use ngchange directive , pass function change url variable:
html:
<!-- change scrollable element whatever scroll bar on aka table... ect --> <div> <scrollable-element ng-change="mychangefunction()"></scrollable-element> </div>
js:
// inside controller: $scope.mychangefunction = function() { var newurl = '/some/image.img' $scope.varname = newurl; };
Comments
Post a Comment