当我使用 jquery 更改 div 类时，AngularJs 翻译指令停止工作

Question

好吧，直截了当的问题是我的 $scope.$apply() 也没有消化更改以重新运行 translate 指令。 我向您展示了带有应用翻译指令和 jQUERY 代码的 HTML，以在调整窗口（客户端）大小时更改类。

菜单的 HTML：

<div id="navigation" ng-cloak>
    <div class="container-fluid">
        <a href="home.html" id="brand">BRAND NAME</a>

        <ul class='main-nav'>
            <li ng-class="{'active':activeLink == 'home'}">
                <a href="#/">
                    <span>Home</span>
                </a>
            </li>
            <li ng-class="{'active':activeLink == 'planning'}" data-trigger="hover">
                <a href="#" data-toggle="dropdown" class='dropdown-toggle'>
                    <span>Planning</span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                        <a href="#" data-toggle="dropdown" class='dropdown-toggle'>Goals</a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#/goals/listview">{{'TOP_MENU.GOAL_LIST' | translate}}</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

这里是 JQuery 代码，它可以响应屏幕大小的变化。

function checkLeftNav() {
var $w = $(window),
    $content = $("#content"),
    $left = $("#left");
if ($w.width() <= 840) {
    if (!$left.hasClass("mobile-show")) {
        $left.hide();
        $("#main").css("margin-left", 0);
    }
    if ($(".toggle-mobile").length == 0) {
        $("#navigation .user").after('<a href="#" class="toggle-mobile"><i class="fa fa-bars"></i></a>');
    }

    if ($(".mobile-nav").length == 0) {
        createSubNav();
    }

} else {
    if (!$left.is(":visible") && !$left.hasClass("forced-hide") && !$("#content").hasClass("nav-hidden")) {
        $left.show();
        $("#main").css("margin-left", $left.width());
    }

    $(".toggle-mobile").remove();
    $(".mobile-nav").removeClass("open");

    if ($content.hasClass("forced-fixed")) {
        $content.removeClass("nav-fixed");
        $("#navigation").removeClass("navbar-fixed-top");
    }

    if ($w.width() < 1200) {
        if ($("#navigation .container").length > 0) {
            versionFluid();
            $('body').addClass("forced-fluid");
        }
    } else {
        if ($('body').hasClass("forced-fluid")) {
            versionFixed();
        }
    }
  }
}

现在我的解决方案是获取 jquery 应用类的导航元素范围，并在其范围内调用 $apply()。这是行不通的。

解决方案代码：

$(window).resize(function(e) {
checkLeftNav();
// get the scope of element and apply $apply()
var sc = angular.element('.mobile-nav').scope();
sc.$apply();

});

但是，当屏幕尺寸更改为小于 840 的移动视图时，我仍然可以在这样的菜单中看到直接代码值而不是翻译文本。当我改回屏幕宽度超过 840 时，它会显示正确的翻译文本。我正在通过调整大小在我的电脑上的 chrome 上进行试验。我在手机上查了一下，那里也没有翻译。

Answer 1

AngularJS 提供双向 data 绑定，而不是双向 everything 绑定。它不打算以这种方式使用。 $apply() 只查看数据模型 - 当您想说“嘿，Angular，我已经更新了数据模型，快来看看！”时，它是您调用的函数。这实际上是它的唯一目的。 Angular 中没有任何方法旨在查看 DOM 本身的变化——这是非常低效的，并且无论如何都违背了 Angular 的理念，这就是为什么它没有 jQuery。

您可能想要评估其他更好地支持这种事情的框架。但是，如果您真的希望这样做，您可以轻松地将其转换为适当的 AngularJS 模块。最好的方法是简单地将所有这些代码粘贴到控制器中，然后将窗口调整大小绑定更改为使用 Angular 的 $window 服务，例如：

var windowElement = angular.element($window);
windowElement.bind('resize', function() {
    // Do my calculations here.
});

通过您的计算，您会计算相同的变量，但您会将它们存储在范围变量中，然后调整您的模板以使用它们。例如，您对 $(".toggle-mobile").remove(); 所做的操作可以替换为：

if (windowElement.width > 840) {
    // Other code here
    $scope.isMobile = false;
} else {
    $scope.isMobile = false;
}

在你的模板中：

<a href="#" class="toggle-mobile" ng-if="isMobile" ng-click="toggleMobile();"><i class="fa fa-bars"></i></a>

试一试，使用它一两个星期，你将永远不会回到 jQuery。这需要很多时间来适应，但一旦你意识到“我正在查看我的模板，不知道什么神秘的事件处理程序与所有这些东西绑定”的概念是多么的破碎。