Internet Explorer 和指令 AngularJS答案

【问题标题】：Internet Explorer & Directive AngularJSInternet Explorer 和指令 AngularJS
【发布时间】：2015-06-18 12:17:09
【问题描述】：

我正在开发一个 AngularJS (1.3.9) 项目，一切都在 Internet Explorer（9、10 和 11）预期的所有浏览器上运行良好 — 但它在 Internet Explorer 移动设备上运行良好……。

症状是：

应用程序和模板已加载
cpu 为@100%
不显示动态数据。

我做了很多测试，分离出了一段似乎挂起的代码……

HTML 代码：

<ul class="schedules">
        <li ng-repeat="schedule in schedules | limitTo:2" class="schedule {{ ::schedule.channelLogo }}">
            <img class="channel-logo {{ ::schedule.channelLogo }}" ng-src="{{getChannelLogoSrc(schedule.channelLogo)}}" />

            {{schedule}}
            <hr>
        </li>
    </ul>

与相关的指令：

schedulesDirectives
    .directive('schedules', function () {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: 'components/schedules/partials/schedules.html',
            scope: {
                displayPart: "@",
                schedules: "=data",
                carousel: "=",
                prevSlide: "&",
                nextSlide: "&"
            },
            link: function(scope, element, attributes) {
                scope.getChannelLogoSrc = function(channelLogo) {
                    // return adequate size depending on device
                    return "/img/channel-logo/" + channelLogo + "." + scope.carousel.logoType;
                }
            }
        }
    })

如果我用一个可以正常工作的静态 src 更改 ng-src。为什么？其他奇怪的事情：getChannelLogoSrc 函数应该调用 2x (limitTO:2)，但它却调用了 10x。

有什么建议吗？谢谢。

【问题讨论】：

您确定您没有在某种兼容模式或怪癖模式下运行 IE 吗？
是的，兼容模式。 “怪癖模式”是什么意思？
en.wikipedia.org/wiki/Quirks_mode
好的，更多信息。如果我通过硬编码 channelLogo 来更改链接函数中的返回行，那行得通！！！但是，channelLogo 永远不会为空……所以我不明白……
据我所知，模板中的函数会在模板中的每个手表上调用，例如 4 个插值、一个 ng-repeat、5 x 2 = 10、有时是随机的，有时更多。

标签： angularjs internet-explorer angularjs-directive

【解决方案1】：

你为什么还要创建一个函数并从模板中调用它？对于您试图实现的目标而言，这看起来很昂贵。

我建议在 link 函数中设置 url 并在模板中分配它 - 模板中的一次性绑定让我觉得图像也不会改变：

link: function (scope, element, attributes) {
  scope.imageUrl = "/img/channel-logo/" + schedule.channelLogo + "." + scope.carousel.logoType;
}

和

<img class="channel-logo {{ ::schedule.channelLogo }}" ng-src="{{ ::imageUrl }}" />

其他奇怪的事情：getChannelLogoSrc 函数应该调用 2x (limitTO:2)，但调用的是 10x。

您没有为ngRepeat 提供track by 表达式，因此每次schedules 更改时都会重新渲染这些项目。

【讨论】：