单选按钮返回 ngchange 中的前一个值答案

【问题标题】：Radio button returning the previous value in ngchange单选按钮返回 ngchange 中的前一个值
【发布时间】：2014-10-17 20:41:13
【问题描述】：

我正在尝试为带有值的无线电输入创建指令。这些值将从指令传递。当单选按钮更改时，我还想更新控制器中的值。这是我想出的...

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

app.controller('MainCtrl', function($scope) {
  $scope.selected = 1;
  $scope.values = [
    1,2,3,4
    ];
  $scope.update=function(){
    console.log("the value is "+ $scope.selected)
  }
})
.directive('jgRadio', function() {
    return {
      restrict:"E",
      scope:{
        values:"=",
        selected:"=",
        update:"&"
      },
      template: '<input ng-repeat="item in values" type="radio" value="{{item}}" ng-model="$parent.selected" ng-change="update()"></input>'
    };
  });

但是控制台日志输出的是之前选择的（plunker）

谁能看到我错过了什么？

【问题讨论】：

周末还没休息 :-) 我会告诉你的

标签： angularjs angularjs-directive angularjs-scope angular-directive

【解决方案1】：

我想是子范围继承问题的典型案例。将模型绑定更改为包含选定值的对象并将对象绑定为双向绑定：-

$scope.selected = {value: 1};

并从您的指令中删除丑陋的 $parent @ @$parent.selected 到 selected.value

 <input ng-repeat="item in values" type="radio" ng-value="item" ng-model="selected.value" ng-change="update()"></input>

Plnkr

原因是，在运行 ng-change 之后，需要运行摘要循环来更新指令消费者上的 2 路绑定的值。并且只有在 ng-change 函数的评估完成后才会运行摘要循环。因此，当您在父控制器中执行 console.log($scope.selected) 时，在您的函数中，2 路绑定变量的值尚未在父范围内更新。因此，您会看到 console.log 显示范围的先前值，并且绑定在摘要周期后仍会更新。当您将对象而不是原始对象绑定到 2 路绑定时，2 路绑定范围变量和父控制器范围变量都指向同一个对象引用并且更改会立即反映，也更喜欢使用 ng-value 反对 value={{item}}尤其是在处理无线电输入时。

将给定的表达式绑定到 input[select] 或 input[radio] 的值，这样当元素被选中时，该元素的 ngModel 被设置为绑定值。

【讨论】：

刚刚用解释更新了我的答案.. :) 问题比我以前想象的更有趣..
另一个有趣的旁注是，如果我在它引发错误之前添加一个应用程序然后工作。所以这个答案有很大帮助，但对于原语来说，除了设置任意超时之外你什么都做不了？
@Jackie 这是 2 路绑定如何工作以及摘要循环如何工作的基础知识（没有魔法将隔离范围上的值设置为 2 路绑定父范围，它需要摘要循环运行）。当您处于角度上下文中时，您不会做任何应用:)。这就是最后一段解释的内容。我也不会为此使用超时。您可能会通过使用 scope.$evalAsync 推入异步队列来延迟处理
嗯，还有另一种方法可以做的是将当前选择的值通过绑定函数传递给父函数。

【解决方案2】：

我的解决方案： http://plnkr.co/edit/FcivQTotZAyjh5EvFNRr

  $scope.update=function(){
    $timeout(function(){
      console.log("the value is "+ $scope.selected);
    })
  }

【讨论】：