Ng-show没有在工厂功能的状态改变上工作

Question

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

 $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 消化更改时调用，你会得到一个错误消息)。