AngularJS中如何实现控制器间传值及指令模板赋值？

嘿，我来帮你搞定AngularJS里跨控制器指令传值的问题～ 下面给你几种基于$scope和Angular核心机制的可行方案，每种都附代码示例，你可以根据自己的实际场景选择：

方案1：用单例服务共享数据（最推荐的跨控制器方案） #

AngularJS的服务是单例的，也就是说整个应用里只有一个实例，非常适合作为跨控制器的数据中转站——不管两个控制器是父子关系还是完全独立的兄弟关系，都能完美工作。

实现步骤： #

1. 先创建一个专门的共享服务，用来存值和取值
2. 在Controller1里把获取到的值存入服务
3. 在Controller2或者它的指令里注入这个服务，拿到值后绑定到scope上就能在模板里用了

代码示例：

// 1. 定义共享数据服务
angular.module('myApp').service('SharedDataService', function() {
  let _sharedValue = null;

  // 设置值的方法
  this.setValue = function(value) {
    _sharedValue = value;
  };

  // 获取值的方法
  this.getValue = function() {
    return _sharedValue;
  };
});

// 2. Controller1：从函数获取值并存入服务
angular.module('myApp').controller('Controller1', function($scope, SharedDataService) {
  // 模拟从某个函数获取到值
  const fetchedValue = "我是来自Controller1的内容！";
  
  // 把值交给服务保管
  SharedDataService.setValue(fetchedValue);
});

// 3. Controller2：从服务拿到值，传给指令
angular.module('myApp').controller('Controller2', function($scope, SharedDataService) {
  // 从服务取出值，绑定到当前scope
  $scope.passedValue = SharedDataService.getValue();
});

// Controller2对应的指令
angular.module('myApp').directive('directive2', function() {
  return {
    // 指令模板直接用绑定好的passedValue
    template: '<div>指令模板显示的值：{{ passedValue }}</div>',
    scope: false, // 继承父scope（也就是Controller2的scope）
    // 如果你想用隔离scope，也可以这么写：
    // scope: { passedValue: '=' },
    // 对应的HTML要改成 <directive2 passed-value="passedValue"></directive2>
  };
});

对应的HTML结构：

<div ng-app="myApp">
  <div ng-controller="Controller1">
    <!-- Controller1的内容区域 -->
  </div>

  <div ng-controller="Controller2">
    <!-- 渲染Controller2的指令 -->
    <directive2></directive2>
  </div>
</div>

方案2：利用父子作用域继承（仅适用于Controller1是Controller2父级的场景） #

如果你的Controller2的DOM元素嵌套在Controller1的DOM里面（也就是Controller1是父控制器，Controller2是子控制器），那子scope会自动继承父scope的属性。这里要注意一个坑：别直接绑定基本类型（字符串、数字），要用对象包裹，否则子scope修改值的时候会创建自己的属性，不会同步到父scope。

代码示例：

angular.module('myApp').controller('Controller1', function($scope) {
  // 用对象包裹要传递的值，避免原型继承的遮蔽问题
  $scope.sharedData = {};
  
  // 模拟从函数获取值并赋值
  $scope.sharedData.value = "我是来自父控制器Controller1的内容！";
});

angular.module('myApp').controller('Controller2', function($scope) {
  // 子scope继承了父scope的sharedData，直接用就行，不用额外操作
});

// Controller2的指令
angular.module('myApp').directive('directive2', function() {
  return {
    template: '<div>指令模板显示的值：{{ sharedData.value }}</div>',
    scope: false // 继承父scope（Controller2的scope，它又继承了Controller1的）
  };
});

对应的HTML结构：

<div ng-app="myApp">
  <div ng-controller="Controller1">
    <!-- Controller1的内容区域 -->
    <div ng-controller="Controller2">
      <!-- 渲染Controller2的指令 -->
      <directive2></directive2>
    </div>
  </div>
</div>

方案3：通过指令的隔离scope绑定（适用于指令直接交互的场景） #

如果两个指令在同一个父作用域下，你可以把Controller1指令里的值通过HTML属性传递给Controller2的指令，利用隔离scope的=双向绑定或者@单向绑定来实现。

代码示例：

// Controller1的指令：把获取到的值暴露到父scope
angular.module('myApp').directive('directive1', function() {
  return {
    template: '<div>这是指令1的内容</div>',
    controller: function($scope) {
      // 模拟从函数获取到值
      $scope.fetchedValue = "我是来自指令1的内容！";
    },
    scope: false // 继承父scope，把fetchedValue放到父scope中
  };
});

// Controller2的指令：通过隔离scope接收值
angular.module('myApp').directive('directive2', function() {
  return {
    template: '<div>指令模板显示的值：{{ receivedValue }}</div>',
    scope: {
      receivedValue: '=' // 双向绑定父scope的fetchedValue属性
    }
  };
});

对应的HTML结构：

<div ng-app="myApp">
  <!-- 这里可以是一个父控制器，或者直接用根scope -->
  <div ng-controller="ParentController">
    <directive1></directive1>
    <!-- 通过属性把父scope的fetchedValue传给指令2 -->
    <directive2 received-value="fetchedValue"></directive2>
  </div>
</div>

额外小贴士： #

• 如果需要实时同步值的变化，可以在服务里结合$rootScope.$emit/$rootScope.$on来发送和监听事件，当值改变时通知相关控制器更新scope
• 隔离scope的=是双向绑定，@是单向绑定（字符串插值），&是绑定方法，根据你的需求选择合适的绑定方式

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