Hide an item outside the route-based DOM DOM

Question:

How to add a “View” view / route to my angular app that hides an element located outside the ng-viewDOM?

Situation:

On my angular page, I have a left navigation tree view and a main view in the center:

<div ng-app="myApp">
    <div class="col-sm-3" ng-controller="TreeController">
        <div treeviewdirective-here>
        </div>
    </div>
    <div class="col-sm-9 content" ng-view="">
    </div>
</div>

Each node in the tree structure changes location using something like window.location.hash = '#/' + routeForTheClickedItem;.

Using standard routing, this works fine, i.e. the tree does not restart every time, but only the main "window".

Problem:

. - . , , ng-view , .. treeview , .

, , ng-view? , ? - :

<div class="col-sm-3" ng-controller="TreeController" ng-show="IsUserLoggedIn">
+4
2

div.

- :

<div ng-app="myApp" ng-controller="MainController">

MainController a Session. - Session , , .

MainController:

_app.controller('MainController', function ($scope, SessionService) {
    $scope.user = SessionService.getUser();
});

SessionService:

_app.factory('SessionService', function() {
    var user = null;
    return {
        getUser : function() {
            return user;
        },
        setUser : function(newUser) {
            user= newUser;
        }
    };
});

, , SessionService. , a SessionService LoginController.

, , html:

<div ng-app="myApp" ng-controller="MainController">
    <div class="col-sm-3" ng-controller="TreeController">
        <div ng-hide="user == null" treeviewdirective-here>
        </div>
    </div>
    <div class="col-sm-9 content" ng-view="">
    </div>
</div>
+2

routeChangeSuccess ng-view

$scope.$on('$routeChangeSuccess', function (event, currentRoute, previousRoute) {
//do something here
});

, , angularjs IRC - maurycyg

+3

Source: https://habr.com/ru/post/1529771/


All Articles