Question

请查看下面的代码。在输入字段中插入有效值时，为什么$scope.data变量不会更新？我怎样才能做到这一点？

Codepen：http://codepen.io/uloco/pen/jboorN

HTML

<div ng-app="app" ng-controller="AppController" class="content">
    <input type="tel" ng-model="form.phone" placeholder="phone" />
    <input type="email" ng-model="form.email" placeholder="email" />
    <p>{{form}}</p>
    <p>{{data}}</p>
</div>

JS

angular
.module('app', [])
.controller('AppController', function($scope) {
    $scope.form = {};
    $scope.data = {
        foo: 'bar',
        phone: $scope.form.phone,
        email: $scope.form.email
    }
});

Answer 1

为什么$ scope.data变量不会更新？

因为$scope.data和$scope.form之间没有任何关联。这些是具有独立属性的两个独立对象，您正在更改$scope.form的属性。

如果您确实想拥有两个单独的对象，则需要在$scope.$watch上使用$scope.form手动同步它们

$scope.$watch('form', function(obj) {
    $scope.data.phone = obj.phone;
    $scope.data.email = obj.email;
}, true);

演示：http://codepen.io/anon/pen/PPvvBr?editors=101

或ngChange指令：

<input type="tel" ng-model="form.phone" placeholder="phone" ng-change="sync()" />
<input type="email" ng-model="form.email" placeholder="email" ng-change="sync()" />

和

$scope.sync = function() {
    $scope.data.phone = $scope.form.phone;
    $scope.data.email = $scope.form.email;
};

演示：http://codepen.io/anon/pen/bVyyQN?editors=101

在这种情况下，

ngChange解决方案是首选。但是，如果你有超过2个字段，那么$ watch可能更简单。

Answer 2

你可以尝试添加ng-change：

 $scope.change = function(data){
        $scope.data.phone = data.phone;
        $scope.data.email = data.email;
    };

和Html

<input type="tel" ng-model="form.phone" placeholder="phone" ng-change="change(form);"/>
<input type="email" ng-model="form.email" placeholder="email" ng-change="change(form);"/>

Answer 3

$ scope.form.phone和$ scope.form.email在控制器设置中分配，它们都是未定义的。即使$ scope.form更改，$ scope.data也不知道，因为它存储的所有内容都是“未定义的”。

要检索数据，您可以实现如下功能：

$scope.getData = function () {
    return {
        foo: 'bar',
        phone: $scope.form.phone,
        email: $scope.form.email
    };
};

这可确保在您需要时初始化对象。

Answer 4

您的$ scope.data被弃用一次，而不是更改电话或电子邮件。

尝试使用 $ watchGroup

$scope.$watchGroup(['form.phone', 'form.email'], function(newValues, oldValues, scope) {
  scope.data = {
        foo: 'bar',
        phone: scope.form.phone,
        email: scope.form.email
 }
});

Answer 5

你可以用的 HTML

angular .module('app', []) .controller('AppController', function($scope) { $scope.form = {}; $scope.data = function() { return { foo: 'bar', phone: $scope.form.phone, email: $scope.form.email }; } });

<强> JS

2015-11-25 10:49:50.621 MyApp[40227:2065265] critical: Stacktrace: 2015-11-25 10:49:50.621 MyApp[40227:2065265] critical: at <unknown> <0xffffffff> 2015-11-25 10:49:50.621 MyApp[40227:2065265] critical: at System.Reflection.MonoCMethod.InternalInvoke (object,object[]) [0x00016] in /Users/builder/data/lanes/2356/9ce9e8b9/source/maccore/_build/Library/Frameworks/Xamarin.iOS.framework/Versions/git/src/mono/mcs/class/corlib/System.Reflection/MonoMethod.cs:650 2015-11-25 10:49:50.621 MyApp[40227:2065265] critical: at System.RuntimeType.CreateInstanceMono (bool) [0x000ca] in /Users/builder/data/lanes/2356/9ce9e8b9/source/maccore/_build/Library/Frameworks/Xamarin.iOS.framework/Versions/git/src/mono/mcs/class/corlib/ReferenceSources/RuntimeType.cs:113 2015-11-25 10:49:50.622 MyApp[40227:2065265] critical: at System.RuntimeType.CreateInstanceSlow (bool,bool,bool,System.Threading.StackCrawlMark&) [0x0001a] in /Users/builder/data/lanes/2356/9ce9e8b9/source/maccore/_build/Library/Frameworks/Xamarin.iOS.framework/Versions/git/src/mono/mcs/class/corlib/ReferenceSources/RuntimeType.cs:87 2015-11-25 10:49:50.622 MyApp[40227:2065265] critical: at System.RuntimeType.CreateInstanceDefaultCtor (bool,bool,bool,System.Threading.StackCrawlMark&) [0x0002a] in /Users/builder/data/lanes/2356/9ce9e8b9/source/maccore/_build/Library/Frameworks/Xamarin.iOS.framework/Versions/git/src/mono/external/referencesource/mscorlib/system/rttype.cs:5734 2015-11-25 10:49:50.622 MyApp[40227:2065265] critical: at System.Activator.CreateInstance (System.Type,bool) [0x00040] in /Users/builder/data/lanes/2356/9ce9e8b9/source/maccore/_build/Library/Frameworks/Xamarin.iOS.framework/Versions/git/src/mono/external/referencesource/mscorlib/system/activator.cs:214 2015-11-25 10:49:50.622 MyApp[40227:2065265] critical: at System.Activator.CreateInstance (System.Type) [0x00000] in /Users/builder/data/lanes/2356/9ce9e8b9/source/maccore/_build/Library/Frameworks/Xamarin.iOS.framework/Versions/git/src/mono/external/referencesource/mscorlib/system/activator.cs:147 2015-11-25 10:49:50.622 MyApp[40227:2065265] critical: at Cirrious.MvvmCross.Touch.Views.MvxTouchViewsContainer.CreateViewOfType (System.Type,Cirrious.MvvmCross.ViewModels.MvxViewModelRequest) <IL 0x00077, 0x002fb> 2015-11-25 10:49:50.622 MyApp[40227:2065265] critical: at Cirrious.MvvmCross.Touch.Views.MvxTouchViewsContainer.CreateView (Cirrious.MvvmCross.ViewModels.MvxViewModelRequest) <IL 0x0003e, 0x0018f> 2015-11-25 10:49:50.623 MyApp[40227:2065265] critical: at Cirrious.MvvmCross.Touch.Views.MvxCanCreateTouchViewExtensionMethods.CreateViewControllerFor (Cirrious.MvvmCross.Touch.Views.IMvxCanCreateTouchView,Cirrious.MvvmCross.ViewModels.MvxViewModelRequest) <IL 0x00007, 0x0004a> 2015-11-25 10:49:50.623 MyApp[40227:2065265] critical: at Cirrious.MvvmCross.Touch.Views.Presenters.MvxTouchViewPresenter.Show (Cirrious.MvvmCross.ViewModels.MvxViewModelRequest) <IL 0x00003, 0x00037> 2015-11-25 10:49:50.623 MyApp[40227:2065265] critical: at Cirrious.MvvmCross.Touch.Views.MvxTouchViewDispatcher/<>c__DisplayClass4.<ShowViewModel>b__3 () <IL 0x00028, 0x00090> 2015-11-25 10:49:50.623 MyApp[40227:2065265] critical: at Cirrious.MvvmCross.Touch.Views.MvxTouchUIThreadDispatcher.RequestMainThreadAction (System.Action) <IL 0x00028, 0x000e8> 2015-11-25 10:49:50.623 MyApp[40227:2065265] critical: at Cirrious.MvvmCross.Touch.Views.MvxTouchViewDispatcher.ShowViewModel (Cirrious.MvvmCross.ViewModels.MvxViewModelRequest) <IL 0x00024, 0x0015b> 2015-11-25 10:49:50.623 MyApp[40227:2065265] critical: at Cirrious.MvvmCross.ViewModels.MvxNavigatingObject.ShowViewModelImpl (System.Type,Cirrious.MvvmCross.ViewModels.IMvxBundle,Cirrious.MvvmCross.ViewModels.IMvxBundle,Cirrious.MvvmCross.ViewModels.MvxRequestedBy) <IL 0x00030, 0x00145> 2015-11-25 10:49:50.623 MyApp[40227:2065265] critical: at Cirrious.MvvmCross.ViewModels.MvxNavigatingObject.ShowViewModel (System.Type,Cirrious.MvvmCross.ViewModels.IMvxBundle,Cirrious.MvvmCross.ViewModels.IMvxBundle,Cirrious.MvvmCross.ViewModels.MvxRequestedBy) <IL 0x00006, 0x0004f> 2015-11-25 10:49:50.624 MyApp[40227:2065265] critical: at Cirrious.MvvmCross.ViewModels.MvxNavigatingObject.ShowViewModel<T_REF> (Cirrious.MvvmCross.ViewModels.IMvxBundle,Cirrious.MvvmCross.ViewModels.IMvxBundle,Cirrious.MvvmCross.ViewModels.MvxRequestedBy) <IL 0x0000e, 0x0005b>

更新了codepen：http://codepen.io/anon/pen/Xmwwye

通过ng-model更新不同的$ scope对象属性

5 个答案: