Binding connexion application Angular

Bonjour,

voilà je suis actuellement en train de développer une application web en angularJs. j'ai créé l'application avec ses routes puis le login permettant de se connecter afin de voir le contenu du site tout fonctionne à une exception. En effet, j'ai créé des div/components et mon login ne couvre que le <ng-outlet></ng-outlet> et pas mon <menu></menu> Donc on m'a parlé de binding afin de résoudre ce problème par un ng-show et lorsque je me connecte je binde et hope le ng-show passe a true et affiche le menu mais comment puis je réaliser cela ?

Actuellement j'ai ceci mais ça ne fonctionne pas :/

Code:

1
2
3
4
5
6
7
8
9
        .component('app', {
            template: 
 
                '<div id="test" test="myVar" >' +
                '<my-menu menu="ctrl" ></my-menu>' +
                '<my-sidebar sidebar="ctrl" ></my-sidebar>' +
                '</div>' +
                '<ng-outlet ></ng-outlet>',
            controller: appCtrl,

mon login.html :

Code:

1
2
3
4
<div class="form-group">
            <button ng-disabled="$ctrl.loading" class="btnLog" test="toggle()">Connexion</button>
            <img ng-if="$ctrl.loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
        </div>

et mon login.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
  angular
        .module('app.login')
        .component('myLogin', {
            templateUrl: 'app/login/login.html',
            controller: loginCtrl,
            bindings: {
                test: '<'
            },
        });
 
 
 
 
    function loginCtrl($location, AuthenticationService) {
        var $ctrl = this;
 
        $ctrl.login = login;
 
        initController();
 
        function initController() {
            // status login
            AuthenticationService.Logout();
        };
            function login() {
            $ctrl.loading = true;
            AuthenticationService.Login($ctrl.username, $ctrl.password, function (result) {
                if (result === true) {
                    $location.path('/');
                $ctrl.toggle = function() {
                $ctrl.myVar = !$scope.myVar;
                };
                } else {
                    $ctrl.error = 'Erreur dans la saisie';
                    $ctrl.loading = false;
 
                }
            });
        };
 
 
 
    }

merci de votre aide :)