如何在Angularjs中的2个不同控制器中更新$ scope时绑定并自动更新视图

Question

这是一个小提琴： http ： //jsfiddle.net/a0eLhcbm/

我有一个简单的设置：

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

    {{ page.time }}

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

</div>

有一个函数，比方说，从其他地方使用ajax获取user.name，该函数属于控制器PageController。

问 ：无论如何，只要控制器PageController接收到信息，我就可以让UsernameController中的{{ user.name }}更新自己？

这是我的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

您可以在pageController（即UsernameController的父控制器）中定义您的用户，无论何时在pageController中更改它，它也将在usernameController中更新

第二个解决方案是在父级中使用ng-view，在路由中使用控制器用于UsernameController

索引文件

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

{{ page.time }}
  <ng-view></ng-view>


  </div> 

user.html

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

路线编码

  .when("/user",{
  controller:"usernameController",
  templateUrl : 'user.html'

 })

第三种解决方案是提供服务

.factory("userFactory",function(){
 var user = {};
 return{
 setUser : function(usern){
 user  = usern;

  },
 getUser : function(usern){
 return user;

},

 } 

现在你可以从服务中获取用户并设置为服务。

Answer 2

您可以通过多个控制器执行其中一个以共享相同的值：

1. 将价值提升到所有感兴趣的控制器都可以访问的更高级别的范围。 控制器将通过范围继承获得它，因为angular会自动通过范围层次结构搜索值。

2. 获得该值的人通过所有控制器都可以访问的更高级别范围广播它。 听取此广播的所有控制器都将获得该值。

Answer 3

可能有很多方法可以解决这个问题，我的共同点是使用以下两种方法之一：

[ 1 ]创建一个服务 ，您可以将其共享到应用程序的任何部分（控制器，服务，指令和过滤器）。

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

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语法声明控制器 。 对子控制器使用此类表示法来使用其别名访问父控制器。

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>