AngularJS - 是否可以在链接或编译中更改指令上的 ngModel 属性的值？

Question

我正在尝试创建一个指令，该指令将根据属性值将 ngModel 属性添加到标记中。例如：

angular.module('myModule').
  directive('myDirective', function() {
    return {
      link: function(scope, elem, attrs) {
        var modelName = 'myPrefix.' + attrs.name;
        attrs.$set('ngModel', modelName);
      }
    };
  });

这样这个html：

<input name="foo" my-directive></input>

编译成

<input name="foo" ng-model="myPrefix.foo" my-directive></input>

它接受输入的名称，附加一个前缀，并将 ngModel 属性设置为该值。

当我尝试在链接函数中执行此操作时，似乎 input 没有注册到 formController，因此 form.foo 返回未定义。

有可能完成我想做的事情吗？

编辑：

似乎在 HTML 上设置了 ngModel 属性，但它没有在表单中注册，或者 ngModelController 没有被实例化。如果我在范围内查看ngModel 的值，当我修改输入时它不会改变。

Answer 1

您应该查看NgModelController 的文档。它会回答你的问题。为了进一步解释，这里是要点：

您可以捕获link: 函数的第四个参数，即您的ng-model 值。您可以使用该对象来读取和设置模型。

link: function(scope, element, attrs, ngModel) {
    if(!ngModel) return; // do nothing if no ng-model

    // Specify how UI should be updated
    ngModel.$render = function() {
      element.html(ngModel.$viewValue || '');
    };

    // Listen for change events to enable binding
    element.on('blur keyup change', function() {
      scope.$apply(read);
    });
    read(); // initialize

    // Write data to the model
    function read() {
      var html = element.html();
      // When we clear the content editable the browser leaves a <br> behind
      // If strip-br attribute is provided then we strip this out
      if( attrs.stripBr && html == '<br>' ) {
        html = '';
      }
      ngModel.$setViewValue(html);
    }
}

希望对您有所帮助。

Answer 2

我能够通过使用模板函数来实现目标。我认为它在链接函数中不起作用，因为它发生在收集所有指令之后，因此编译器无法识别已添加 ngModel 指令。不过，我不确定为什么它在编译函数中不起作用（即使我将优先级设置为 100）。

这是指令的工作版本：

angular.module('myModule').
  directive('myDirective', function() {
    return {
      replace: true,
      template: function(elem, attr) {
        var newElem = '<input ng-model="model.' + attr.name + '">';
        return newElem;
      }
    };
  });