Question

我正在使用jQuery创建一个下拉导航，根据用户是否登录到应用程序来更改其css值。导航更改中显示的链接基于应用程序控制器中loginStatus var是否为true：

的index.html：

<ul id="links">
    <li ng-if="loginStatus !== true">
        <div>
            <a class="active" ui-sref="home" ui-sref-active="active">Home</a>
        </div>
    </li>
    <li>
        <div>
            <a class="active" ui-sref="cardSearch" ui-sref-active="active">Card Search</a>
        </div>
    </li>
    <li ng-if="loginStatus == true">
        <div>
            <a class="active" ui-sref="deckBuilder" ui-sref-active="active">Deck Builder</a>
        </div>
    </li>
    <li ng-if="loginStatus == true">
        <div>
            <a class="active" ui-sref="deckCollection" ui-sref-active="active">Deck Collection</a>
        </div>
    </li>
    <li ng-if="loginStatus == true">
        <div>
            <a class="active" ng-click="logout()" ui-sref-active="active">Log Out</a>
        </div>
    </li>
</ul>

controller.js

angular.module('mainApp').controller('mainController', function($scope, mainService, $state) {

    $scope.loginStatus = false;

    $scope.logout = function() {
        sessionStorage.removeItem('user');
        $scope.loginStatus = false;
        console.log($scope.loginStatus)
        $state.go('home');

    }

    $scope.loginStatus = sessionStorage.getItem('user') ? true : false;

    $scope.$on('reloadController', function() {
        console.log('Something is happening')
        $scope.loginStatus = sessionStorage.getItem('user') ? true : false;
    })

});

如何在索引中获取jQuery以识别控制器中的变量，以便其方法可以正常工作？

<script>
    $(document).ready(function() {

        var dropDownDisplayed = false;

        // jQuery methods go here...
        $(".fa-bars").click(function() {
            console.log('runnin ', dropDownDisplayed)

            if (dropDownDisplayed == false) {
                $("#links").css("display", "flex");
                dropDownDisplayed = true;
            } else if (dropDownDisplayed == true) {
                $("#links").css("display", "none");
                dropDownDisplayed = false;
            }
        });

        $(window).resize(function() {
            console.log('window.innerwidth', window.innerWidth)
            if (window.innerWidth > 1024 || dropDownDisplayed == true) {
                $("#links").css("display", "flex");
            } else {
                $("#links").css("display", "none");
            }
        })

        // dropdown menu while loggedout
        $(window).on("resize", function() {
            if (loginStatus !== true && $(window).width() <= 700) {
                $("#links").css("top", "140px");
            }
        })

        // dropdown menu while loggedin
        $(window).on("resize", function() {
            if (loginStatus == true && $(window).width() <= 1024) {
                $("#links").css("top", "500px");
            }
        })

    });
</script>

Answer 1

没有。您的jQuery无法访问控制器上的范围变量。不是直接......但在最坏的情况下，总是IBM.EntityFrameworkCore对象可以修改Angular代码来存储它（或复制它）。

作为一方... Angular将在文档准备好后向DOM添加/删除内容。因此，根据您编写它们的方式，只有jQuery的一些部分才能正常工作。但是，您应该会发现window事件上的处理程序将触发。

假设您的window元素现在由Angular呈现，您会发现这个元素不起作用：

.fa-bars

因为$(".fa-bars").click(function(){ });并不一定准备好文档，并且Angular可能已经废除了它们以响应某些操作。

您可以通过捕获冒泡的点击事件来解决这个问题：

.fa-bars

所有这一切......如果这是你拥有的所有jQuery代码，我只会将它转换为Angular并扔掉旧东西。

可以在index.html中的jquery访问链接控制器中的变量吗？

1 个答案: