javascript - 求助Angular 1 在$scope裡向物件屬性賦值不起效的原因（作用域問題），無盡感激！

Question

定義了這麼一個模組，用了angular原生的ngRoute

var app = angular.module('NewsPub', ['ngRoute']);

//配置路由,controller为下面定义的AddController
app.config['$routeProvider', function($routeProvider) {
  $routeProvider.when('/add', {templateUrl: add.html,controller: 'AddController'});
}

app.controller('AddController',function($scope){
    $scope.title = '';
    var a = {prop: $scope.title};
    $scope.add = function(){
      console.dir(a);
    }            
});

在id為add.html的ng-template使用了ng-model綁定了$scope中title的值，並且設定按鈕綁定定add()事件

<input type="text" ng-model="title" value="标题">
<span>{{title}}</span>
<button ng-click="add()">Btn</button>

現在問題來了，如下圖所示，改變input框內的值，<span>內的值會跟著改變，這表示資料有存在雙向綁定，即$scope.title會隨著input框內的值改變而改變。

#但是，不管怎樣改變input框內的值，點選button內觸發add()事件時，控制台輸出的a物件的prop屬性永遠是$scope.title的初始值''（不會隨title的值改變而改變）

請求大神打救，自己是菜鳥，搞了很久都搞不明白，無盡感激！

Answer 1

你頁面的input綁定的是$scope.title，而不是你的a.prop，你在input裡面輸入改變的是$scope.title,是angular幫你改變的，但是你的a.prop沒人再賦值給它啊，所以一直都是你開始賦的值,就是""。

Answer 2

這是變數引用問題
`$scope.title = '';

var a = {prop: $scope.title};`

創建了兩個物件屬性對''的引用，你改变了$scope.title的值，就是断掉了$scope.title的引用，但是a.prop依然保持对''的引用

Answer 3

建議看一下 理解AngularJS的作用域Scope 這篇文章。