将 Service 中的变量与 Controller 中的变量绑定

Question

我尝试在控制器和服务之间进行一些数据绑定。 我只希望在我的控制器中的变量 userIsConnected 必须在函数 getUserIsConnected 返回其他值时立即更改。 也许我必须在我的服务中添加一个属性 userIsConnected？

这里是例子：

app.service('UserService', function($http){

    var user = null;
    this.getUser = function (){
        return user;
    };
    this.setUser = function (user){
        user = user;
    };
    this.getUserIsConnected = function (){
        if(user)
            return true;
        else
            return false;
    };

});

app.controller("NavBarCtrl", function($scope, $http, $location, $rootScope, UserService) {

    $scope.signInIsDisabled = true;
    $scope.userIsConnected = UserService.getUserIsConnected();

});

感谢您的帮助

Answer 1

这个问题：

 $scope.userIsConnected = UserService.getUserIsConnected();

...是$scope.userIsConnected 在控制器初始化的那一刻变成getUserIsConnected() 输出的任何东西。如果您希望它继续更新，您应该尝试这样的操作：

 $scope.userIsConnected = UserService.getUserIsConnected;

然后在您看来，您将使用{{userIsConnected()}}。

但是，根据我的经验，这种观察者的渲染成本非常高。因为在渲染视图时，实际上会运行userIsConnected() 10 次才最终放弃（因为在AngularJS 中，堆栈溢出限制为10）。

当我第一次开始使用 AngularJS 时，我在我的应用程序中使用了该方法。但是现在，我有一个名为“myDynamicMenu”的指令，它使用$routeChangeSuccess 检测路由事件何时触发（即，当用户将页面从登录更改为仪表板，或从仪表板更改为注销到主页时）。

在这种情况下，我的菜单指令将检查用户身份验证状态（登录或注销），然后它将显示正确的菜单（即用户菜单 [仪表板，我的设置，注销]，或来宾菜单[登录，注册]）。这种方法的渲染速度要快得多。

编辑：示例指令：

  app.directive('myDynamicMenu', function ($rootScope, UserService) {
    return {
      restrict: 'E',
      templateUrl: 'my-dynamic-menu.html',
      link: function (scope) {    
        $rootScope.$on('$routeChangeSuccess', updateMenuWhenRouteChanges);

        ////////////////////////////////////////////////////////////

        function updateMenuWhenRouteChanges () {
          scope.isLoggedIn = UserService.getUserIsConnected() ? true : false;
        }
      }
    };
  });

你的模板应该是这样的：

<div id="guest-menu" ng-show="!isLoggedIn">
   I am a logged-out guest!
</div>
<div id="member-menu" ng-show="isLoggedIn">
   I am a logged-in member!
</div>

然后使用 <my-dynamic-menu></my-dynamic-menu> 将菜单拖放到您的布局中。