javascript - ngSrc 在 ngClick 上更新，但在 keydown 事件处理程序上不更新

Question

我正在开发一个实时 map 类型的应用程序，它有一些导航按钮(例如平移、缩放等)。我添加了一个 keydown 事件处理程序以允许键盘控制。事件处理程序调用相同的方法。

我发现奇怪的是，这些按钮在加载图像时响应迅速且可靠，但按键响应非常慢。现在，我实际上认为图像更新是由于 $interval 服务重复获取它而不是来自 keydown 事件。注意:我已经通过在 url 中附加日期/时间等唯一数据来处理陈旧的缓存图像(这是一个单独的问题)。

我添加了控制台日志记录以确保 imgUrl 确实在变化，而且确实在变化。看起来按钮点击导致 ngSrc 使用更新的 imgUrl 重新呈现，但键盘事件不是。这是一个简化的测试应用程序，它使用按钮和“t”键重新创建相同的行为，在本例中它们是 keydown 事件:

Plunker

javascript

var myApp = angular.module("myApp", ['ngMaterial'])
    .controller("myCtrl", function ($scope)
    {
        $scope.isToggled = false;

        $scope.Toggle = function ()
        {
            console.log("Toggle(Start): " + $scope.imgUrl);

            if ($scope.isToggled)
            {
                $scope.imgUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Grassland_wiki.jpg/640px-Grassland_wiki.jpg";
            }
            else
            {
                $scope.imgUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Monotropa_uniflora_03769.jpg/640px-Monotropa_uniflora_03769.jpg";
            }

            $scope.isToggled = !$scope.isToggled;

            console.log("Toggle(End): " + $scope.imgUrl);
        };

        $scope.ProcessKey = function (e)
        {
            if (e.key === "t")
            {
                $scope.Toggle();
            }
        };

        $scope.Toggle();
        document.addEventListener("keydown", $scope.ProcessKey);
    });

html

<div ng-controller="myCtrl" ng-app="myApp">
    <md-button class="md-raised" ng-click="Toggle()">Toggle</md-button>
    <img id="testImg" ng-cloak ng-src="{{imgUrl}}">
</div>

我在 javascript 和 angularjs 中跌跌撞撞地支持 C# 应用程序，这是我的大部分经验所在。

我不确定根本原因是什么。也许这与引用 $scope 函数变量/表达式的 javascript 事件监听器有关？这种依赖性的一部分是在我的主应用程序中，我使用 $http 服务来获取图像。

除了我这样做的方式，还有其他选择吗？有没有办法强制图像重新渲染？

Answer 1

因为你在 AngularJS 之外添加了一个事件，Angular 永远不会知道 $scope 属性发生了变化。因此，您必须使用 $scope.$apply() 手动告诉 Angular 某些内容已更改。

var myApp = angular.module("myApp", [])
    .controller("myCtrl", function ($scope)
    {
        $scope.isToggled = false;

        $scope.Toggle = function ()
        {
            console.log("Toggle(Start): " + $scope.imgUrl);

            if ($scope.isToggled)
            {
                $scope.imgUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Grassland_wiki.jpg/640px-Grassland_wiki.jpg";
            }
            else
            {
                $scope.imgUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Monotropa_uniflora_03769.jpg/640px-Monotropa_uniflora_03769.jpg";
            }

            $scope.isToggled = !$scope.isToggled;

            console.log("Toggle(End): " + $scope.imgUrl);
        };

        $scope.ProcessKey = function (e)
        {
            if (e.key === "t")
            {
                $scope.Toggle();
                $scope.$apply();
            }
        };

        $scope.Toggle();
        document.addEventListener("keydown", $scope.ProcessKey);
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="myCtrl" ng-app="myApp">
    <button class="md-raised" ng-click="Toggle()">Toggle</button>
    <img id="testImg" ng-cloak ng-src="{{imgUrl}}">
</div>