Question

我有一个名为 dgFormElement 的指令，带有链接，可动态生成单个表单输入的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);

      }
    };
});

在应用程序的早期（在另一个指令中，而不是在控制器中），值已放入范围，并且可在链接 {{1}中找到}：

$scope

以下是一些示例html输出：

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

此时出现问题...当页面呈现时，文本输入不包含 Hello World 。

将文本字段留空并提交表单，以下值将传递到提交处理程序（<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>）：

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。

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

指令链接没有用值填充表单输入

1 个答案: