javascript - 在 Angularjs 的 2 个不同 Controller 中更新 $scope 时如何绑定(bind)和自动更新 View

Question

这是一个 fiddle :http://jsfiddle.net/a0eLhcbm/

我有一个简单的设置:

<div ng-app="demo" ng-controller="PageController">

    {{ page.time }}

    <div ng-controller="UsernameController">
        {{ user.name }}
    </div>

</div>

有一个函数可以使用 ajax 从其他地方获取 user.name，并且该函数属于 Controller PageController。

问题:我是否可以让 UsernameController 中的 {{ user.name }} 在 Controller PageController 收到信息后立即更新自身？

这是我的 javascript 设置:

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

function_that_fetches_for_username = function() {
    //Some function that fetch for username asynchronously
};

app.controller( 'PageController', function ( $scope ) {

    //Initial data
    $scope.page = {};
    $scope.page.time = Date();
    function_that_fetches_for_username();
    //How can I make the UsernameController to update its view from this Controller as soon as this controller receives the information?

});

app.controller( 'UsernameController', function( $scope ) {
    //Initial data
    $scope.user = {};
    $scope.user.name = "";

    //How can I automatically updated the $scope.user.name in view as soon as the PageController receives the information about the username?

});

Answer 1

可能有很多方法可以解决这个问题，我的分享是使用以下两种方法之一:

[1] 创建一个 service 您可以共享到应用程序的任何部分( Controller 、服务、指令和过滤器)。

关于您的问题，您可以简单地创建一个 User可以在您的 Controller 之间共享的服务。下面的解决方案假定 function_that_fetches_for_username()是服务UserResource有一个方法 get()模拟从服务器获取数据。 User服务是在所有 Controller 之间共享的空对象。

DEMO

JavaScript

angular.module('demo', [])

  .service('UserResource', function($timeout) {
    this.get = function() {
      return $timeout(function() {
        return {
          id: 'w3g45w34g5w34g5w34g5w3',
          name: 'Ryan'
        };
      }, 2000);
    };
  })

  .service('User', function() {
    return {};
  })

  .controller('PageController', function($scope, UserResource, User) {

    $scope.page = {
      time: Date()
    };

    UserResource.get().then(function(data) {
      angular.extend(User, data);
    });
  })

  .controller('UsernameController', function($scope, User) {
    $scope.user = User;
  });

HTML

<div ng-app="demo" ng-controller="PageController">

  {{ page.time }}
  <hr>

  <div ng-controller="UsernameController">
      <div ng-if="user.name">
        {{ user.name }}
      </div>
      <div ng-if="!user.name" style="color: red">
        Waiting for Response...
      </div>
  </div>

</div>

---

[2] 使用controllerAs声明 的语法 controllers 。将这种类型的表示法用于子 Controller 以使用其别名访问父 Controller 。

DEMO

JavaScript

angular.module('demo', [])

  .service('UserResource', function($timeout) {
    this.get = function() {
      return $timeout(function() {
        return {
          id: 'w3g45w34g5w34g5w34g5w3',
          name: 'Ryan'
        };
      }, 2000);
    };
  })

  .controller('PageController', function(UserResource) {
    var ctrl = this;

    ctrl.page = {
      time: Date()
    };

    ctrl.user = {};

    UserResource.get().then(function(data) {
      angular.extend(ctrl.user, data);
    });

  })

  .controller('UsernameController', function() {
    this.getUser = function(user) {
      console.log(user);
    };
  });

HTML

<div ng-app="demo" ng-controller="PageController as PC">

  {{ PC.page.time }}
  <hr>

  <div ng-controller="UsernameController as UC">

      <div ng-if="PC.user.name">
        {{ PC.user.name }}
      </div>

      <div ng-if="!PC.user.name" style="color: red">
        Waiting for Response...
      </div>

      <button type="button" ng-click="UC.getUser(PC.user)"
        ng-disabled="!PC.user.name">
        Access user from Page Controller
      </button>

  </div>

</div>