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

Question

I'm using jQuery to make a dropdown nav that changes its css value based on whether a user is logged in to the app or not. Links visible on the nav change based on whether or not the loginStatus var is true or not in the app's controller:

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;
    })

});

how can I get the jQuery in my index to recognize the variable in my controller so that its methods can work?

<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

No. Your jQuery is not going to be able to access scope variables on your controller. Not directly... But at worst, there's always the window object which you could modify the Angular code to store it (or copy it) there.

As a side... Angular is going to add/remove things to the DOM after document ready. So only bits and pieces of your jQuery are going to work depending on how you write them. However, you should find that your handlers on the window events will trigger.

Assuming that your .fa-bars elements are now being rendered by Angular, you'll find that this one will not work:

$(".fa-bars").click(function(){ });

Because the .fa-bars are not necessarily there at document ready, and potentially Angular has done away with them in response to certain actions.

You can fix that a little by catching the bubbled click event:

$(document).on("click", ".fa-bars", function() {});

All that being said... If this is all the jQuery code that you have, I would just convert it to Angular and throw the old stuff away.