ng-switch未按预期工作

时间:2015-06-18 12:32:39

标签: angularjs angularjs-directive angularjs-scope ng-switch

也许使用双向绑定和$watch对我来说仍然不是很清楚..但我期待这段代码能够正常工作!

我的 index.html 页面中有 topNavbar 指令。如果用户未被记录, topNavbar 应该显示 loginButton ,否则如果他已经被记录,则显示 loggedinButton

所以我在 topNavbar 中有一个ng-switch,查看 CurrentUserService isLogged 属性。我想这就像$watch(CurrentUserService.isLogged)

但是,当我将CurrentUserService.isLogged更改为true时,ng-switch不会立即更新。它会在我执行任何操作后更新,例如单击按钮或更改视图。 为什么它没有像我期望的那样工作?

这是我的代码:

index.html

<html lang="it" xmlns:ng="http://angularjs.org" ng-app="epoiApp">
  ...
  <body style="overflow-y: auto;">
    ...
    <top-navbar></top-navbar>
    ...
  </body>
</html>

指令模板topNavbar

<div ng-switch on="navbarCtrl.isLogged()">
  <div ng-switch-when="false">
    <login-button></login-button>
  </div>
  <div ng-switch-when="true">
    <loggedin-button></loggedin-button>
  </div>                                            
</div>

控制器navbarCtrl

controller:function(CurrentUserService)
            {
             this.isLogged = function()
                            {return CurrentUserService.isLogged();} 
            }

CurrentUserService

.service('CurrentUserService', function () 
  {   
   // initialization
   _islogged = false;

   this.isLogged = function() 
        { return _islogged; };

  }  

谢谢

1 个答案:

答案 0 :(得分:2)

这是plunker

当模型发生变化时,Angular会启动摘要周期(这就是为什么在您以某种方式与UI进行交互后发现它更新的原因)。

服务中的闭包变量的更改不是模型的一部分,因此当您知道此变量已更新时,需要手动$scope.$apply()开始摘要周期。