AngularJS:在用户身份验证后重新加载ng-include(或解决问题的更好方法)

Question

我真的只是在学习Angular，我正在尝试创建一个基于身份验证限制内容访问的应用程序。我有身份验证部分工作(也使用 Laravel PHP 框架(，但我在根据身份验证状态"重新加载"某些内容时遇到了问题，即在成功进行身份验证之后。

最初，我试图做的是在用户登录后更新主导航菜单。我确信有更好的方法，但到目前为止，我拥有的是从服务器返回的视图，该视图根据用户是否登录而具有不同的导航元素，然后将其加载到带有ng-include的元素中。

有一个登录选项，它将登录表单加载到 ng-view 中。用户登录后，我想使用服务器的视图刷新 ng-include。

有没有办法在成功登录后在ng-include中重新加载该模板？

如果这是错误的方法，请随时推荐更好的技术来解决此问题。当然，这在jQuery中很容易做到，但我更喜欢用Angular的方式做事。

以下是我到目前为止的一些代码：

索引.html：

<div class="container" ng-controller="appController">
    <div id="nav" ng-include src="menuUrl()"></div>
    <div class="row">
        <div class="span3" ng-include src="'partials/brands.html'" ng-controller="brandController"></div>
        <div class="span9" ng-view></div>
    </div>
</div>

一些控制器：

.controller('appController', function($scope){
    $scope.loggedIn = false;
    $scope.menuUrl = function() {
        return "partials/nav.html";
    };
})
.controller('loginController',function($scope, $sanitize, $location, Authenticate, Flash){
    $scope.login = function(){
        Authenticate.save({
            'email': $sanitize($scope.email),
            'password': $sanitize($scope.password)
        },function() {
            $location.path('/products')
            Flash.clear()
            sessionStorage.authenticated = true;
        },function(response){
            Flash.show(response.flash)
        })
    }
})
.controller('logoutController',function($scope, $location, Authenticate, Flash){
    $scope.logout = function (){
        Authenticate.get({},function(response){
            delete sessionStorage.authenticated
            Flash.show(response.flash)
            $location.path('/login')
        })
    }
})

服务业：

.factory('Authenticate', function($resource){
    return $resource("/service/authenticate/")
})
.factory('Flash', function($rootScope){
    return {
        show: function(message){
            $rootScope.flash = message
        },
        clear: function(){
            $rootScope.flash = ""
        }
    }
})

应用程序：

 .config(['$routeProvider',function($routeProvider){
        $routeProvider.when('/', {
            templateUrl: 'partials/home.html', 
            controller: 'homeController'
        })
        $routeProvider.when('/login', {
            templateUrl: 'partials/login.html', 
            controller: 'loginController'
        })
        $routeProvider.when('/logout', {
            templateUrl: 'partials/logout.html', 
            controller: 'logoutController'
        })
        $routeProvider.otherwise({redirectTo :'/'})
    }])
    .config(function($httpProvider){
        var interceptor = function($rootScope,$location,$q,Flash){
        var success = function(response){
            return response
        }
        var error = function(response){
            if (response.status == 401){
                delete sessionStorage.authenticated
                $location.path('/')
                Flash.show(response.data.flash)
            }
            return $q.reject(response)
        }
            return function(promise){
                return promise.then(success, error)
            }
        }
        $httpProvider.responseInterceptors.push(interceptor)
    })
    .run(function($http,CSRF_TOKEN){
        $http.defaults.headers.common['csrf_token'] = CSRF_TOKEN;
    })

拉

拉维尔观点：

<ul class="nav nav-tabs">
  <li><a href="#/">Home...</a></li>
  @if(!Auth::check())
  <li><a href="#/login">Log-in</a></li>
  @else
  <li><a href="#/logout">Log-out</a></li>
  @endif
  <li><input name="search" id="search" type="search" placeholder="Search products..." />
</ul>

Answer 1

当用户

登录在根作用域上成功时，您可以使用广播方法从引发事件开始

$rootScope.$broadcast('userLoggedIn',{user:user});

在appController您可以订阅偶数

$scope.$on("userLoggedIn",function(event,args) {
     $scope.menuUrl=null;
     $scope.menuUrl="partials/nav.html";
});

这也意味着将 menuUrl 更改为控制器和 HTML 绑定中的属性。

Alos，如果您可以为登录用户和匿名用户定义多个服务器视图，那么您可以在用户登录时翻转视图。

Answer 2

@Chandermani的答案几乎接近，其实你可以随意添加一些参数来强制刷新，就像这样：

app.controller('appController', function($scope){
   var getMenu = function(){
     var random = Math.random();
     return "partials/nav.html?r=" + random;
   }
   $scope.menuUrl = getMenu();
   $scope.$on('userLoggedIn', function(){
     $scope.menuUrl = getMenu();
   })
})