Question

我尝试在控制器和服务之间进行一些数据绑定。我只想让我的变量userIsConnected进入我的控制器，只要函数getUserIsConnected返回另一个值就必须改变。也许我必须在我的服务中添加一个userIsConnected属性？

这里的例子是：

＆＃13;

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();

});

＆＃13;

感谢您的帮助

Answer 1

这个问题：

 $scope.userIsConnected = UserService.getUserIsConnected();

...是$scope.userIsConnected在Controller初始化时成为getUserIsConnected()输出的任何内容。如果你想让它继续更新，你应该尝试这样的事情：

 $scope.userIsConnected = UserService.getUserIsConnected;

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

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

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

在此事件中，我的menu指令将检查用户身份验证状态（登录或注销），然后它将显示正确的菜单（即用户菜单[仪表板，我的设置，注销]或访客菜单[登录，注册]）。这种方法在渲染方面要快得多。

编辑：示例指令：

  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>将菜单放入布局。

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

1 个答案: