4

我知道这很长，但在更复杂的情况下我正在做的事情似乎是导致问题的具体原因。我尝试的所有简单示例都可以正常工作。

我有一个使用 angularjs 和 laravel 四的应用程序设置。

主页通过 laravel 路由渲染：

Route::get('/', function() {
    return View::make('app');
});

app.php 返回具有以下结构的网站骨架：

<!doctype html>
<html lang="en" ng-app="app">
<head>


  <script src="/js/angular.js"></script>
  <script src="/js/angular-sanitize.js"></script>
  <script src="/js/angular-ui-router.js"></script>
  <script src="/js/app.js"></script>

</head>
<body>

    <div class="navbar navbar-inverse navbar-fixed-top" ng-controller="NavController">
        <div class="navbar-inner">
            <div class="container-fluid">
                    <button class="button pull-right" ng-click="logout()">Logout</button>
                    <p class="navbar-text pull-right" >
                        Logged in as <a href="#" class="navbar-link">{{ currentUser.email }} id is : {{ currentUser.userId }}</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

  <div class="row-fluid offset05">
      <div id="view" ng-view></div>
    </div>
  </div>

</body>
</html>

app.js 的基础知识：

var app = angular.module("app", ['ngSanitize','ui.state','ui.bootstrap']);

用户最初被路由到登录模板，此时 LoginController 更新驻留在 UserService 中的用户信息。

app.controller("LoginController", function($scope,$rootScope, $location, AuthenticationService, UserService) {

    $scope.credentials = { email: "", password: "" };

  $scope.login = function() {
    AuthenticationService.login($scope.credentials).success(function() {
      $location.path('/home');
    });
  };
});

Authentication Service 适当地更新 UserService 变量：

app.factory("AuthenticationService", function($rootScope, $http, $sanitize, SessionService, FlashService, CSRF_TOKEN, UserService) {

  return {
    login: function(credentials) {
      var login = $http.post("/auth/login", sanitizeCredentials(credentials));
      login.success(function(data){

           UserService.currentUser = data.user;

    });

      return login;
    }
});

NavController（上面看到的导航栏控制器）将其范围绑定到 UserService.currentUser。 

app.controller("NavController",function($scope, UserService, AuthenticationService,$location){

    $scope.currentUser = UserService.getCurrentUser();

});

UserService 的相关部分：

app.factory("UserService", function($http){

var _currentUser = {}

return{
    currentUser: _currentUser,

    getCurrentUser: function() {
        return _currentUser;}

    };

});

当用户登录时，他们的用户电子邮件和用户 ID 应该出现在导航栏中。

如果我创建一个严格使用 javascript/html 的示例，则绑定没有问题。

使用上面提到的机制/结构，导航栏在重新加载整个页面之前不会响应 UserService 当前用户变量的变化。

用户登录后，我可以验证 UserController 和 UserService 是否都适当地更新了 currentUser。尽管如此，除非我重新加载整个页面，否则 NavController 不会反映更新的用户。

我认为这是因为 NavController 现在正在使用更新的信息重新运行，但为什么正常绑定不起作用？

我想这与导航栏是通过 php 加载的事实有关。

我的问题是我怎样才能：a）通过服务进行绑定或b）在必要时重新加载NavController（登录/注销后）

4

1 回答 1

4

有几种方法可以处理这个问题。

  1. 您可以将您绑定$scope到服务本身，在这种情况下，对该模型的任何更改都将自动获取
  2. 您可以使用以下命令观察服务的变化$watch

在此示例中，您可以看到这两种技术：（http://plnkr.co/edit/bhBXMr?p=preview）：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, AuthenticationService, UserService) {
  $scope.user = UserService;
  $scope.login = function(){
    AuthenticationService.login();
  }
  // watch the service for changes to currentUser
  $scope.$watch(function(){
    return UserService.currentUser;
  }, function(currentUser){
    $scope.currentUser = currentUser;
  }, true);
});

app.service('AuthenticationService', function($http, UserService){
  return {
    login: function(){
      $http.get('data.json').success(function(data){
        UserService.currentUser = data;
      });
    }
  };
});

app.service('UserService', function($rootScope){
  return {
    currentUser: null
  };
});

HTML 标记：

<body ng-controller="MainCtrl">
  <button ng-click="login()">Login</button>
  <div>Current User: {{user.currentUser}}</div>
  <!-- from the watch -->
  <div>Current User: {{currentUser}}</div>
</body>
于 2013-08-12T17:34:25.463 回答