Wie Winkel ng-init attributewith jquery

Question

so ändern, ich habe ein div mit einem Bild, die ich für eine gif ändern möchten, wenn eine bestimmte Schriftrolle aufgetreten ist ...

hier ist die html:

<div class="col-xs-6 mitad" ng-init="varname='images/estandar/impresoraEstandarAnimada.gif'" id="seccion3B"> 
     <img ng-src="{{varname}}" id="gif"> 
    </div> 

jetzt, die Idee ist, die uRL in varname zu ändern ... ich habe versucht, dies aber nicht funktioniert hat:

if ($(window).width() > 1700 && vistaEstandar.scrollTop > 1596 && vistaEstandar.scrollTop < 2490) 
     { 
      lore: 'url(../images/estandar/monitorVeloz1.gif)'; 
      $("#gif").attr("ng-src", "{{lore}}"); 
     } 

eine Ahnung, wie es funktioniert zu machen ?? Ich verstehe Angular nicht sehr gut (neu bei Programmierung) und wenn ich versuche, es ohne Angular zu ändern, indem ich nur das SRC-Attribut vom img-Tag ersetze, lädt das GIF das erste Mal, aber wenn ich es erneut in der if-Bedingung oder wenn I die Website aktualisieren, es lädt als statisches Bild

AKTUALISIERT:

all dieser Code js ist in einem Controller bereits:

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 schon ich für die partielle

Answer 1

einen Controller haben

auf Ihrem html-Element aka Ihre Scroll die ngChange Direktive verwenden und eine Funktion übergeben, die Ihre URL Variable ändern:

HTML:

<!-- change scrollable element to whatever the scroll bar is on aka table... ect --> 
<div> 
    <scrollable-element ng-change="myChangeFunction()"></scrollable-element> 
</div> 

JS:

// inside your controller: 
$scope.myChangeFunction = function() { 
     var newUrl = '/some/image.img' 
     $scope.varname = newUrl; 
    }; 

Answer 2

Was Sie vorschlagen, ist nicht optimal, aber da Sie gefragt haben, wie es geht, ist hier die Lösung:

Working DEMO

Die Idee ist, dass von jQuery, müssen Sie die $scope Eigenschaft festlegen und $scope.$apply() aufrufen, um die Änderungen auf dem Bildschirm zu rendern.

$(function() { 
    $(window).on("scroll", function() { 
    var scope = angular.element("#gif").scope(); 
    if ($(window).scrollTop() > 100) { 
     scope.$apply(function() { 
     scope.varname = "mynewurl.gif"; 
     }); 
    } 
    else { 
     scope.$apply(function() { 
     scope.varname = "images/estandar/impresoraEstandarAnimada.gif'"; 
     }); 
    } 
    }); 
}); 

EDIT

Nachdem Sie Ihre aktualisierten Code geschrieben, kann ich sehen, dass Sie alle von Ihnen jQuery-Code in Ihrer Winkelregler setzen. Deine $ (function() {...}); sollte außerhalb Ihrer Winkelsteuerung sein.

Answer 3

Wenn Sie eckige js verwenden, sollten Sie jQuery vermeiden.

Die einfachste Antwort wäre, Sie müssten einen Controller erstellen und ihn Ihrem div zuweisen.

und in Ihrem Controller können Sie das Bildlaufereignis an $ document (document object of javascript) oder $ window (window object of javascript) binden. Unten ist der Beispielcode.

angular.module('abc',[]) 
    .controller('abcController', ['$scope','$window',function($scope,$window){ 
    angular.element($window).on('scroll',function(){ 
     // To access scrollX use $window.scrollX 
     if($window.scrollY > 100){ 
      $scope.varname = 'someurl';// set varname to some url 
      $scope.$apply();// this is to run the angular digest cycle, in short refreshing your div 
     } 

    }); 
}]); 

in Ihrem HTML:

<div class="col-xs-6 mitad" ng-controller="abcController" ng-init="varname='images/estandar/impresoraEstandarAnimada.gif'" id="seccion3B"> 
    <img ng-src="{{varname}}" id="gif"> 
</div> 

hoffe, das hilft !!