AngularJS中基于两个指令实现双向绑定的技术咨询

没问题，我来帮你搞定这个双向绑定的需求！你的代码其实只差几个小调整就能正常工作，咱们一步步来梳理：

先修正现有代码的小问题 #

你当前的my-directive-one有两个容易忽略的错误：

• 指令的scope配置里写的是myConfig: '='，但模板里传递的属性名是config，两者不匹配，Angular没法正确建立绑定关系
• link函数里的scop...是拼写错误，应该是完整的scope

修正后的完整代码示例 #

1. 控制器代码

app.controller('MyController', function($scope) {
  $scope.myConfig = { value: 0 };
});

2. my-directive-one的正确定义

app.directive('myDirectiveOne', function() {
  return {
    templateUrl: 'directives/my-directive-one.html',
    // 这里要和模板里的属性名保持一致：config
    scope: {
      config: '=' 
    },
    link: function(scope) {
      scope.increaseValue = function() {
        // 修改绑定对象的属性，因为是引用类型，会自动同步到父作用域
        scope.config.value++;
      };
    }
  };
});

3. my-directive-two的示例（用来验证同步效果）

假设你想让第二个指令实时显示当前的数值，指令可以这么写：

app.directive('myDirectiveTwo', function() {
  return {
    template: '<div>当前数值：{{ config.value }}</div>',
    scope: {
      config: '='
    }
  };
});

4. 页面模板

<div ng-controller="MyController">
  <my-directive-one config="myConfig"></my-directive-one>
  <my-directive-two config="myConfig"></my-directive-two>
  <!-- 控制器里的值也会同步更新 -->
  <p>控制器中的数值：{{ myConfig.value }}</p>
</div>

为什么这样能实现双向绑定？ #

因为你传递的myConfig是一个对象类型（不是字符串、数字这类原始值），AngularJS的双向绑定对于对象是通过引用传递的。当你在指令的子作用域里修改scope.config.value时，实际上是修改父作用域中myConfig对象的同一个属性，所以控制器和另一个指令都会实时看到这个变化。

如果是传递原始值，虽然也能用=实现双向绑定，但用对象传递的方式更稳妥，能避免作用域继承带来的意外问题，代码逻辑也更清晰。

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