您的位置:首頁技術文章
文章詳情頁

javascript - 求助Angular 1 在$scope里向對象屬性賦值不起效的原因(作用域問題),無盡感激!

瀏覽:146日期:2024-03-08 17:58:49

問題描述

定義了這么一個模塊,用了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框內的值改變而改變。javascript - 求助Angular 1 在$scope里向對象屬性賦值不起效的原因(作用域問題),無盡感激!

但是,不管怎樣改變input框內的值,點擊button內觸發add()事件時,控制臺輸出的a對象的prop屬性永遠是$scope.title的初始值’’(不會隨title的值改變而改變javascript - 求助Angular 1 在$scope里向對象屬性賦值不起效的原因(作用域問題),無盡感激!

請求大神打救一下,自己是菜鳥,搞了很久都搞不明白,無盡感激!

問題解答

回答1:

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

回答2:

這是變量引用問題`$scope.title = ’’;

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

創建了兩個對象屬性對’’的引用,你改變了$scope.title的值,就是斷掉了$scope.title的引用,但是a.prop依然保持對’’的引用

回答3:

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

標簽: JavaScript
国产综合久久一区二区三区