如何用Factory方法在AngularJS控制器间共享数据并解决提前渲染问题

首先我得先指出你代码里的几个关键问题，这些问题不仅导致第二个控制器提前显示内容，还会让整个逻辑跑不起来：

1. Factory定义语法错误：你写的app.factory("datafactory",function("dataFactory"){是错的，factory的回调函数不需要把服务名当参数传进去，而且你这里参数名和factory名还不一致。
2. 控制器重名+依赖缺失：你定义了两个同名的mycontroller，第二个应该是hellocontroller；而且两个控制器都没注入$scope和datafactory，这会导致$scope和datafactory都无法正常使用。
3. 初始逻辑触发过早：第二个控制器直接在初始化时调用了datafactory.dosum()，所以页面一加载就会显示内容，不符合你点击按钮后才显示的需求。

正确的实现思路 #

我们需要让datafactory作为共享数据的中间层，初始时不返回内容，点击按钮后再更新共享数据，两个控制器都绑定这个共享数据，这样就能实现点击后才同时渲染内容的效果。

修正后的完整代码 #

HTML部分

<div ng-controller="mycontroller">
  <button ng-click="clickme()">demoooooo</button>
  {{message}}
</div>
<div ng-controller="hellocontroller">
  {{message}}
</div>

JS部分

// 定义共享数据的factory
app.factory("datafactory", function() {
  // 初始化共享内容为空
  var sharedData = {
    content: ""
  };

  return {
    // 设置内容的方法
    setContent: function() {
      sharedData.content = "my world";
    },
    // 获取内容的方法
    getContent: function() {
      return sharedData.content;
    }
  };
});

// 第一个控制器：处理点击事件，调用factory设置内容
app.controller("mycontroller", function($scope, datafactory) {
  // 初始化message为空
  $scope.message = "";
  
  $scope.clickme = function() {
    // 设置共享内容
    datafactory.setContent();
    // 更新当前控制器的message
    $scope.message = datafactory.getContent();
  };
});

// 第二个控制器：监听共享数据的变化，只有点击后才会有值
app.controller("hellocontroller", function($scope, datafactory) {
  // 初始化message为空
  $scope.message = "";
  
  // 用$watch监听共享数据的变化，自动更新视图
  $scope.$watch(function() {
    return datafactory.getContent();
  }, function(newVal) {
    $scope.message = newVal;
  });
});

为什么这样能解决问题？ #

1. 共享数据层：datafactory里的sharedData是两个控制器共用的，初始为空，点击按钮后才被赋值。
2. 延迟赋值：第二个控制器不再初始化时直接调用方法，而是通过$watch监听共享数据的变化，只有当点击按钮触发setContent后，sharedData.content有值了，message才会被更新并显示。
3. 语法错误修复：修正了factory和控制器的依赖注入、名称重复等问题，确保代码能正常运行。

如果你不想用$watch，也可以在点击按钮后通过事件通知第二个控制器主动获取数据，但$watch的方式更优雅，能自动同步数据变化。

内容的提问来源于stack exchange，提问作者ronaldino