指令链接不使用值填充表单输入

Question

我有一个名为 dgFormElement 的指令，它带有一个 link，它动态生成单个表单输入的 html 字符串，然后将该输入编译到元素中：

myApp.directive("dgFormElement", function($compile, $injector) {
    return {
      link: function($scope, $element) {

        var html = '';

        // Dynamically build the form input html string here, then...
        // ...
        // ...

        // Compile element.
        var linkFn = $compile(html);
        var content = linkFn($scope);
        $element.append(content);

      }
    };
});

在应用程序的早期（在另一个指令中，而不是在控制器中），值已被放置在范围内，并且在 链接的 $scope 中可用：

console.log($scope.nid); // 123
console.log($scope.title); // Hello World

这是一些示例 html 输出：

<form id="node_edit" class="ng-pristine ng-valid ng-scope">

  <div dg-form-element="">

    <input type="hidden" name="nid" value="123" ng-model="form_state.values['nid']" ng-init="form_state.values['nid'] = nid" class="ng-pristine ng-untouched ng-valid ng-scope">

  </div>

  <div dg-form-element="">

    <input type="text" name="title" value="Hello World" ng-model="form_state.values['title']" ng-init="form_state.values['title'] = title" class="ng-pristine ng-valid ng-scope ng-touched">

  </div>

  <div dg-form-element="">

    <button data-ng-click="dg_form_submit(form_state);" type="button" >Save</button>

  </div>

</form>

此时有一个问题……页面渲染时，文本输入不包含Hello World。

将文本字段留空并提交表单，以下值将通过提交处理程序 (dg_form_submit)：

{
  values: {
    nid: 123
  }
}

但是，如果我在文本字段中输入一些内容（例如 foo）然后提交表单，则会出现以下值：

{
  values: {
    nid: 123,
    title: 'foo'
  }
}

为什么页面加载时Hello World 字符串没有加载到文本输入中？

如果我从文本输入中删除 ng-model，Hello World 文本将正确加载：

<input type="text" name="title" value="Hello World" ng-init="form_state.values['title'] = title" class="ng-pristine ng-valid ng-scope ng-touched">

但随后在表单提交过程中，标题值不可用，只有隐藏值可用：

{
  values: {
    nid: 123
  }
}

有趣的是隐藏值总是通过，但不是文本值。

已解决

经过多次尝试和错误，我发现我只需要在隐藏输入上使用 ng-init 指令，而我后来在应用程序中不小心覆盖了 $scope.nid 和 $scope.title。

Answer 1

这是因为您在输入元素上设置了ng-model。当 Angular 编译 html 时，它将根据 ng-model 的值设置输入值。

我看到您已经将form_state.values['title'] 的初始值设置为title，但是这个变量title 是在哪里定义的？

如果你想用硬编码的字符串初始化它，那么你必须用引号指定它​​。

试试这个。

<input type="text" name="title" ng-model="form_state.values['title']" ng-init="form_state.values['title'] = 'Hello World'" class="ng-pristine ng-valid ng-scope ng-touched">

演示http://plnkr.co/edit/sHS2qvkY0ctXlB1ge5gn?p=preview