如何从指令内部动态更新 ng-model？答案

【问题标题】：how can I update ng-model dynamically from inside a directive?如何从指令内部动态更新 ng-model？
【发布时间】：2017-09-19 22:07:36
【问题描述】：

我是 Angular 的新手，在尝试让 ng-model 显示对象值时无法弄清楚我做错了什么。

目标：

我想创建一个指令来读取对象并根据对象数据生成单选按钮。在这个对象里面我有 {logAs: 'radioGroupName'}。这应该存储到另一个名为 formData 的对象中。

示例：

{logAs: 'dog', options: [{option: 'poodle'}, {option: 'pitbull'}]}

这应该创建两个单选按钮，一个用于pittbull，另一个用于贵宾犬。两者都应该将 ng-model 设置为 dog。如果用户选择 Poodle，那么 formData 对象中的最终输出应该是：

{dog: 'poodle'}

问题：

我相信我已经很接近了，除了 ng-model 之外一切正常。在 ng-model 内部，实际的 Object 值（dog）不会按我的意愿显示，而是得到我输入的 Object 路径。

这是我的 html：

<div ng-app="test">
  <div ng-controller="myController">
    <p>formData: {{formData}}</p>
    <h3>Static (updates formData)</h3>
    <input type="radio" ng-model="formData.dog" value="pitbull"> Pitbull<br/>
    <input type="radio" ng-model="formData.dog" value="Bull Dog"> Bull Dog<br/>
    <input type="radio" ng-model="formData.dog" value="Poodle"> Poodle

    <h3>Dynamic (wont update formData)</h3>
    <directive form="formInfo"></directive>
  </div>

这是 Javascript：

angular.module('test', [])
.controller('myController', function($scope){
    $scope.formData = {};
  $scope.formInfo = {
    title: 'What type of dog do you have?',
    logAs: 'dog',
    options: [{option:'Pitbull'}, {option: 'Bull Dog'}, {option:'Poodle'}]
  }
})

.directive('directive', function(){
    return {
    restrict: 'E',
    template: '{{form.title}}<div ng-repeat="option in form.options"> <input type="radio" ng-model="form.logAs" value="jack" > {{option.option}}</div>',
    scope: {
        form: '='
    }

  }
});

如何让 ng-model 显示对象 ('dog') 的输出而不是对象路径？ 这是fiddle

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-ng-model

【解决方案1】：

在你的小提琴中，这是因为在你的 html 的第 3 行，你有 {{formData}} 而它应该是 {{formData.dog}}

【讨论】：

还是错了。 formData 的显示方式与指令未按预期工作无关。
@ChrisG 他问题的倒数第二行问了什么？它是粗体的。在标题为“问题”的部分中——也是粗体——这说明了什么？
它含蓄地说，就像它在小提琴中的拼写一样，单击单选按钮不会更新formData。 OP 已经发现了这个问题：基于模板生成的 HTML 看起来不像他期望的那样。只有当你真正知道你在说什么时，你才应该使用谦逊。
我的回答解决了 OP 原始帖子中提到的明确问题和明确问题。如果您认为有人问了其他隐含的问题，您应该向 OP 说明这一点，以便他有机会为清楚起见编辑他的帖子 - 特别是在否决直接解决他最重要问题的答案之前。
澄清一下，当我问“如何让 ng-model 显示对象 ('dog') 的输出而不是对象路径时？”我说的是输入标签中的属性ng-model。