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

Question

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

菜单的 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 的移动 View 时，我仍然可以看到直接代码值而不是像这样在菜单中翻译的文本。当我改回屏幕宽度超过 840 时，它会显示正确的翻译文本。我正在通过调整大小在我的电脑上的 chrome 上对此进行试验。我在移动设备上检查过它也没有翻译。

Answer 1

AngularJS 提供双向数据 绑定(bind)，而不是双向一切 绑定(bind)。它不打算以这种方式使用。 $apply() 只查看数据模型——当你想说“嘿，Angular，我已经更新了数据模型，来看看吧!”时，它是你调用的函数。这实际上是它的唯一目的。 Angular 中没有设计用于查看 DOM 本身的更改的方法 - 这是非常低效的并且无论如何都违背了 Angular 的哲学，这就是它在没有 jQuery 的情况下发布的原因。

您可能想要评估能更好地支持此类事情的其他框架。然而，如果你真的想这样做，你可以很容易地将它转换成一个合适的 AngularJS 模块。最好的方法是简单地将所有这些代码粘贴到一个 Controller 中，然后更改窗口大小调整绑定(bind)以使用 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。这需要很多时间来适应，但一旦你习惯了，你就会意识到整个“我正在查看我的模板，但不知道所有这些东西都绑定(bind)了哪些神秘的事件处理程序”的概念是多么糟糕。