AngularJS指令问题：隔离作用域内容无法关联，值无法冒泡到根

我看到你遇到了AngularJS指令中双向绑定无法从孙组件同步到根控制器的问题，这在使用原始类型进行绑定时是一个常见的坑，让我来帮你解决它。

问题原因 #

你当前的代码中，根控制器的vm.value是一个原始字符串类型。AngularJS的双向绑定对于原始类型（字符串、数字、布尔值）采用的是值传递：当你把原始类型传递给子/孙指令的隔离作用域时，实际上传递的是值的副本。孙指令中修改paramTwo时，只会在自己的隔离作用域内创建一个本地副本，并不会影响根控制器中的原始值，所以无法向上同步更新。

解决方案 #

解决这个问题的核心是使用引用类型（对象）来包装原始值。因为对象是引用传递，所有绑定该对象的作用域都会共享同一个引用，修改对象的属性时会同步到所有引用该对象的地方。

修改后的完整代码 #

JavaScript 部分

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

myApp.controller('root', function ($scope) {
 vm = this;
 // 用对象包装原始值，改为引用类型
 vm.user = { name: 'Joe Doe' };
});

myApp.directive('child', function () {
 return {
 restrict: 'A',
 scope: {
 paramOne: '=paramOne'
 },
 link: function (scope, elm, attrs) {
 console.log('Child value: ', scope.paramOne.name);
 }
 }
});

myApp.directive('grandchild', function () {
 return {
 restrict: 'A',
 scope: {
 paramTwo: '=paramTwo'
 },
 link: function (scope, elm, attrs) {
 console.log('Grandchild value: ', scope.paramTwo.name);
 }
 }
});

HTML 部分

<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app="myApp" ng-controller="root as vm">
 Field Value: <strong>{{vm.user.name}}</strong>
 <hr>
 <!-- 传递整个对象给子指令 -->
 <div child param-one="vm.user">
 Child param value: {{paramOne.name}}
 <!-- 传递对象引用给孙指令 -->
 <div grandchild param-two="paramOne">
 Granchild param value: {{paramTwo.name}}
 <br>
 <!-- 绑定对象的属性 -->
 <input type="text" ng-model="paramTwo.name" >
 </div>
 </div>
</div>

关键修改说明 #

1. 根控制器：将原始字符串vm.value改为对象vm.user的name属性，把原始类型包装成引用类型。
2. 指令绑定：子指令和孙指令现在传递的是对象的引用，而非原始值的副本。
3. 模板绑定：所有显示和输入绑定的都是对象的属性（paramOne.name、paramTwo.name），修改这些属性时会直接作用于共享的对象引用，从而实现跨层级的同步更新。

这是AngularJS中处理跨层级双向绑定的最佳实践之一，能有效避免原始类型绑定导致的同步失效问题。

内容的提问来源于stack exchange，提问作者joao.olivio