Question

我想在用户成功登录后将文本从登录更改为注销，从而将网址从主页更改为仪表板。

 $stateProvider.state('home',{url:'/',views:{'':{templateUrl:'./partials/home/home.tpl.html'},'navbar@home' {templateUrl:'./partials/navbar/navbar.tpl.html'},'lsidebar@home':{templateUrl:'./partials/sidebars/lsidebar.tpl.html'},'content@home'{templateUrl:'./partials/content/content.tpl.html'}},authenticate:false })
  .state('dashboard',{url:'/dashboard',views:{'':{templateUrl:'./partials/home/home.tpl.html'},'navbar@dashboard':{templateUrl:'./partials/navbar/navbar.tpl.html'},lsidebar@dashboard':     {templateUrl:'./partials/sidebars/lsidebar.tpl.html'},'content@dashboard':{templateUrl:'./partials/dashboard/dashboard.tpl.html'}},authenticate:true})

样品工厂：

coreApp.factory('AuthFactory',function($http){

var obj={}; 
var isAuthenticated=false;

obj.login=function(data){
    return $http.post('http://reqres.in/api/login',data);
}
obj.userInfo=function(){
    isAuthenticated=true;
    return {name:'xyz',balance:'10.00'};
}
obj.isAuthenticated=function(){
    return isAuthenticated;
}

return obj; });

HTML：

  <a ui-sref='login' ng-show='!AuthFactory.isAuthenticated()'><i class="glyphicon glyphicon-off"></i> Sign in</a>
  <a ui-sref='logout' ng-show='AuthFactory.isAuthenticated()'><i class="glyphicon glyphicon-off"></i>Logout </a>

boostrap：

.run(['$rootScope', '$state','$stateParams','AUTH_EVENTS','AuthFactory',function($rootScope,   $state,   $stateParams,AUTH_EVENTS,AuthFactory){
 $rootScope.$state = $state;
 $rootScope.$stateParams = $stateParams;

 $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {

    if(toState.authenticate &&  !AuthFactory.isAuthenticated())
    {
         $state.transitionTo("login");
         event.preventDefault();
    }   


    console.log("AuthFactory"+AuthFactory.isAuthenticated());
  });

  $rootScope.$on(AUTH_EVENTS.notAuthenticated,function(event){
    console.log('You not logged in');
  });}]);

问题是当用户登录时根目录更新并将AuthFactory.isAuthenticated（）的值打印为true，并且还更改了url但我的lsidebar.tpl.html中的文本未更改。

我做了一些谷歌搜索我发现$ scope。$ apply是一种方法。但我很困惑这种情况的正确方法是什么，或者可以使用$ scope。$ apply on factory function 。

Answer 1

您无法直接在模板中使用服务。服务只是Angular知道如何注入可靠函数的对象。

也就是说，您需要在控制器范围内注入服务并定义属性，并指向服务的链接，以便能够在模板中使用它。

JS

app.controller('myController', ['$scope', 'myService', function ($scope, myService) {
    $scope.myService = myService;
});

HTML

<div ng-controller="myController">{{ myService.someGetterFn() }}</div>

或

JS

app.controller('myController', ['myService', function (myService) {
    this.myService = myService;
});

HTML

<div ng-controller="myController as ctrl">{{ ctrl.myService.someGetterFn() }}</div>

Answer 2

在处理内联表达式时，AngularJS有点令人困惑。尝试：

ng-show="(!AuthFactory.isAuthenticated())"

此外，就$apply()而言，使用它的方式（虽然并不总是适用）是：

$scope.$apply( aaa = true );

请注意，在所有情况下都无法调用此项（例如，如果在Angular 摘要更改时调用，则会收到错误消息）。

ng-show不用于工厂功能的状态更改

2 个答案: