AngularJS模态框变量绑定失效：是否未共享作用域？

没错，你猜的核心方向是对的，但准确来说不是“未共享作用域”，而是AngularJS作用域继承的一个常见坑：你在模态框的控制器里直接赋值$scope.greeting时，创建了一个子作用域的新属性，覆盖了父作用域的同名变量，导致父作用域的greeting根本没被修改，所以绑定不生效。

为什么会这样？ #

AngularJS的作用域是基于原型继承的。当你把父作用域$scope传给模态框时，模态框控制器的$scope是父作用域的子作用域。对于字符串、数字这类原始类型变量，直接赋值$scope.greeting = "Welcome"时，AngularJS会在当前子作用域上创建一个新的greeting属性，而不是修改父作用域里的那个——相当于“遮蔽”了父作用域的变量，外面的视图绑定的还是父作用域的旧值。

解决办法 #

这里给你两种可行的方案，推荐第一种：

1. 用对象包裹原始变量（最佳实践）

把父作用域的greeting放到一个对象里，利用对象的引用类型特性，修改对象属性时会直接同步到父作用域：

var myApp = angular.module('myApp',['ui.bootstrap']); 
myApp.controller('GreetingController', ['$scope', '$modal', function($scope,$modal) { 
  // 将原始变量包裹在对象中
  $scope.data = {greeting: 'Hello!'}; 
  $scope.changeValues = function() { 
    var modalInstance = $modal.open({ 
      templateUrl: 'myModalContent.html', 
      backdrop: 'static', 
      scope: $scope, 
      controller: function($scope, $modalInstance) { 
        // 修改对象的属性，而非直接赋值变量
        $scope.data.greeting = "Welcome"; 
        $scope.cancel = function(){ 
          modalInstance.close(); 
        } 
        $scope.ok = function(){ 
          modalInstance.close(); 
        } 
      } 
    }); 
  }; 
}]);

同时记得把模板里的绑定改成{{data.greeting}}，这样就能实时同步了。

2. 直接访问父作用域（不推荐）

如果不想改结构，也可以用$parent直接操作父作用域的变量：

// 在模态框控制器里改成
$scope.$parent.greeting = "Welcome";

但这种做法会让代码耦合性变强，后续维护起来更麻烦，所以只适合临时测试，不推荐在正式项目里用。

总结 #

原始类型变量在子作用域中直接赋值会触发“阴影属性”问题，这是AngularJS作用域继承的经典陷阱。用对象包裹变量是最稳妥、最符合AngularJS设计思想的解决方案。

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