Javascript 输入无线电ng模型始终未更新

我试图解决一个难题，为什么输入[无线电]控件的ng模型没有像我预期的那样设置。 加载页面后，所有收音机都会正确启动。单击不同的控件会更改radioVal变量-其值在页面中呈现

问题是它看起来只在DOM中发生。当我调试代码时，

$scope.radioVal

总是一样的。。。

modalDialog

的隔离范围不包含

radioVal

属性

在哪个范围内创建收音机

ng型号

？这是一个不同的例子吗

---

可以找到工作代码

---

我的html代码是：

<div ng-app = "app"> 
 <div ng-controller="mainCtrl">         
   <a ng-click="showModalDlg()">Click me</a>
   <br/><br/>
   <modal-dialog show="showModal" action="actionFun">                        
    <form>
      <input type="radio" ng-model="radioVal" value="1">One<br/>
      <input type="radio" ng-model="radioVal" value="nothing changes me">Two<br/>
      <input type="radio" ng-model="radioVal" value="3">Three<br/>
          <br/><br/>
          The model changes in the DOM as expected: <b>radioVal = {{radioVal | json}}</b>
          <br/>
          but by pressing the Action button you can see that the model has not been modified. 
    </form>                        
    <a class="button" action>Action</a>                     
    </modal-dialog>
   </div>
</div>

点击我



一个

两个

三个




DOM中的模型按预期更改：radioVal={{radioVal | json}


但按下“操作”按钮可以看到模型尚未修改。
行动

我的角度代码：

angular.module('common', [])
    .controller('mainCtrl', ['$scope', function($scope){

        $scope.showModal = false;
        $scope.radioVal = "nothing changes me";

        $scope.showModalDlg = function() {
           $scope.showModal = !$scope.showModal;
        };

        $scope.actionFun = function() {
           console.log('actionFun ...' + $scope.radioVal);
        };        

    }]).directive('modalDialog',
        function () {
            return {
               restrict: 'E',
               scope: {
                  show: '=',
                  action: '&',
               },
               replace: true,
               transclude: true,
               link: function (scope, element, attrs) {

                        scope.hideModal = function () {
                           scope.show = false;
                           scope.$apply();
                        };

                        $('a[hide]', element).on('click', function(){
                           scope.hideModal();
                        });

                        $('a[action]', element).on('click', function(){
                           console.log('There is no radioVal in isolated scope either ... ' + scope.radioVal);
                           scope.action()();
                           scope.hideModal();
                        });
                  },
            template: '<div class=\'ng-modal\' ng-show=\'show\'><div class=\'ng-modal-overlay\'></div><div class=\'ng-modal-dialog\' ng-style=\'dialogStyle\'><div class=\'ng-modal-dialog-content\' ng-transclude></div></div></div>'
        }
    });

  angular.module('app', ['common'])

angular.module（'common'，[]）
.controller（'mainCtrl'，['$scope'，函数（$scope）{
$scope.showmodel=false；
$scope.radioVal=“任何东西都不会改变我”；
$scope.showModalDlg=函数（）{
$scope.showmodel=！$scope.showmodel；
};
$scope.actionFun=函数（）{
log（'actionFun…'+$scope.radioVal）；
};        
}]).指令（“modalDialog”，
函数（）{
返回{
限制：'E'，
范围：{
显示：“=”，
行动：‘&’，
},
替换：正确，
是的，
链接：函数（范围、元素、属性）{
scope.hideModal=函数（）{
scope.show=false；
作用域：$apply（）；
};
$（'a[hide]'，element.）。在（'click'，function（）上{
scope.hideModal（）；
});
$（'a[action]'，element.）。在（'click'，function（）上{
console.log（'隔离作用域中也没有radioVal…'+作用域.radioVal）；
作用域（）；
scope.hideModal（）；
});
},
模板：“”
}
});
角度模块（'app'，['common']））

当您在指令中声明

范围

对象时，这意味着您为该指令的每个实例创建了一个独立的范围。您需要将

radioVal

传递给使用指令创建的隔离（子）作用域。 HTML:

---

始终在

ng型号中放置一个点

您当前正试图将一个基元传递给嵌套范围，该嵌套范围将破坏双向绑定。但是，如果传递对象，它将保持对原始对象的引用

简单更改：

$scope.radioVal = "nothing changes me";

致：

并在

ng模型中使用点

<input  ng-model="myModel.radioVal">

更改继承，从而更改绑定

---

谢谢charlietfl，你的推理很有道理，也很有效。但是外部控制器mainCtrl中的$scope.showmodel也是一个原语，双向绑定在这里仍然有效（请参见：scope.hideModal=function（）{scope.show=false；..在指令中。恐怕我仍然不理解某些内容..对，但这正被传递给modal指令，该指令声明与隔离作用域的双向绑定。内部angular正在为您监视它。情况不同..ng model也是一个指令。将在整个po中看到

use dot

sts在这里。是的。我想“ng模型也是一个指令”是我在试图理解我的问题时错过的。如果找不到正确的radioVal，我不会感到惊讶（该radioVal显示在页面中，其值不断变化）由its管理，而不是由我的控制器管理。yarons，感谢您的提示，但我更愿意将我的“通用”模态对话框与嵌入模态对话框内容的控件使用的任何模型解耦（请参见charlietfl响应）。

$scope.radioVal = "nothing changes me";

 $scope.myModel={radioVal : "nothing changes me"};

<input  ng-model="myModel.radioVal">