如何使用 jquery 更改角度 ng-init 属性

Question

所以，我有一个带有图像的 div，当发生特定滚动时，我想将其更改为 gif...

这里是html：

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

现在，想法是，更改 varname 中的 url...我尝试了这个但没有用：

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

知道如何让它工作吗？我不太了解 Angular（编程新手），如果我尝试通过仅替换 img 标记中的 SRC 属性来更改它而不使用 Angular，则 gif 将第一次加载，但如果在 if 条件下再次输入或者如果我刷新网站，加载为静态图片

更新：

所有这些 js 代码都已经在控制器中了：

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
        {

        } 

});
});

所以我已经有一个部分控制器

Answer 1

在你的 html 元素上，也就是你的滚动条上，使用 ngChange 指令并传递一个函数来改变你的 url 变量：

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

在使用 Angular js 时，最好避免使用 jQuery。

最简单的答案是，您需要创建一个控制器并将其分配给您的 div。

在您的控制器中，您可以将滚动事件绑定到 $document（javascript 的文档对象）或 $window（javascript 的窗口对象）。下面是示例代码。

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
        }

    });
}]);

在您的 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>

希望这会有所帮助！

Answer 3

你的建议不是最优的，但既然你问了怎么做，这里是解决方案：

Working DEMO

想法是，从 jQuery 开始，您必须设置 $scope 属性并调用 $scope.$apply() 以将更改呈现到屏幕上。

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

编辑

在您发布更新后的代码后，我可以看到您将所有 jQuery 代码放入 Angular 控制器中。你的 $(function () {...});应该在您的角度控制器之外。