Data binding AngularJS绑定，通过服务的多个控制器，从php呈现的页面的一部分_Data Binding_Angularjs_Laravel 4_Angularjs Service_Angularjs Controller

Data binding AngularJS绑定，通过服务的多个控制器，从php呈现的页面的一部分

data-binding angularjs laravel-4

Data binding AngularJS绑定，通过服务的多个控制器，从php呈现的页面的一部分,data-binding,angularjs,laravel-4,angularjs-service,angularjs-controller,Data Binding,Angularjs,Laravel 4,Angularjs Service,Angularjs Controller,我知道这很长，但我在更复杂的场景中所做的事情似乎有一些特定的原因导致了这个问题。所有简单的例子我都试着做得很好我有一个使用angularjs和LaravelFour的应用程序设置主页通过laravel路由呈现： Route::get('/', function() { return View::make('app'); }); app.php返回具有以下结构的网站框架： <!doctype html> <html lang="en" ng-app="app">

我知道这很长，但我在更复杂的场景中所做的事情似乎有一些特定的原因导致了这个问题。所有简单的例子我都试着做得很好

我有一个使用angularjs和LaravelFour的应用程序设置

主页通过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>

用户最初被路由到登录模板，此时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');
    });
  };
});

身份验证服务适当地更新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();

});

用户服务的相关部分：

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

var _currentUser = {}

return{
    currentUser: _currentUser,

    getCurrentUser: function() {
        return _currentUser;}

    };

}))

当用户登录时，他们的用户电子邮件和用户ID应显示在导航栏中

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

使用上述机制/结构，在重新加载整个页面之前，navbar不会响应UserService当前用户变量中的更改

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

我假设这是因为NavController现在正在使用更新的信息重新运行，但是为什么正常绑定不能工作呢

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

我的问题是，我怎样才能： a）通过服务使绑定正常工作或

b）必要时重新加载NavController（登录/注销后）

有几种方法可以处理此问题

您可以将

$scope

绑定到服务本身，在这种情况下，对该模型的任何更改都将自动获取

您可以使用

$watch

在本例中，您可以看到两种技术：（）：

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>


登录
当前用户：{{User.currentUser}
当前用户：{{currentUser}}

似乎应该有一个$scope。$apply（）；在登录控制器中的某个位置，以便在填充模型时消化和应用更改。

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

<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>