javascript - 求助Angular 1 在$scope里向对象属性赋值不起效的原因（作用域问题），无尽感激！

问题描述

定义了这么一个模块，用了angular原生的ngRoute

var app = angular.module(’NewsPub’, [’ngRoute’]);//配置路由,controller为下面定义的AddControllerapp.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的值改变而改变）

请求大神打救一下，自己是菜鸟，搞了很久都搞不明白，无尽感激！

问题解答

你页面的input绑定的是$scope.title，而不是你的a.prop，你在input里面输入改变的是$scope.title,是angular帮你改变的，但是你的a.prop没人再赋值给它啊，所以一直都是你开始赋的值,就是''。

这是变量引用问题`$scope.title = ’’;

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

创建了两个对象属性对’’的引用，你改变了$scope.title的值，就是断掉了$scope.title的引用，但是a.prop依然保持对’’的引用

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