javascript - 手动应用 ngModel 指令

Question

我的指令需要使用ngModel。

我需要从另一个指令中动态地执行此操作，因为我想用范围做一些时髦的事情并将其从编写 HTML 的人那里抽象出来。

我的第一个想法是使用 link 函数中的 attrs 参数提供的 $set 函数，它可以修改 HTML但指令本身不会被编译。然后我们可以将它与 $compile 提供程序结合起来，它就可以工作了。

attrs.$set('ngModel', someVar);
$compile(element)(scope);

问题是，如果我不(而且我不能)替换元素标记，因为指令被无限期地重新应用和重新编译，这会产生无限递归。

但是我可以摆弄优先级并让它发挥作用:

module.directive('input', [
  '$compile',
  function($compile) {
    return {
      restrict: 'E',
      scope: {},
      priority: 100, // Set this high enough to perform other directives
      terminal: true, // Make sure this is the last directive parsed
      link: function(scope, element, attrs) {
          var key = 'example';
          attrs.$set('ngModel', key);
          $compile(element, null, 100)(scope);
      }
    };
  }
]);

这工作正常，但感觉不对:

• 我现在必须确保元素上的所有其他指令都是能够被重新编译，因为它们都会被编译两次。

• 我必须确保没有人使用更高的优先级。

所以这让我想到为什么我不能只注入(inject) ngModelDirective 并针对我的元素强制编译它？

module.directive('input', [
  'ngModelDirective',
  function(ngModel) {
    return {
      restrict: 'E',
      scope: {},
      priority: 100, // Set this high enough to perform other directives
      terminal: true, // Make sure this is the last directive parsed
      require: '?^form',
      link: function(scope, element, attrs, formCtrl) {
          var key = 'example';
          attrs.$set('ngModel', key);
          var ngModelFactory = ngModel[0];
          var ngModelLink = ngModelFactory.compile(element);
          ngModelLink.call(this, scope, element, attrs, [ngModelFactory.controller, formCtrl]);
      }
    };
  }
]);

参见:https://github.com/angular/angular.js/blob/v1.2.x/src/ng/directive/input.js#L1356

没有抛出错误，但没有任何反应。似乎这还不足以将其连接起来，所以我的问题是任何人都可以详细说明我需要做什么将 ngModelDirective 链接到我的自定义指令而不强制重新编译吗？

Answer 1

ngModel 似乎不适合您正在尝试做的事情。但无论如何你都不需要它。您可以双向绑定(bind)一些变量并将名称传递到模型指令范围:

app.directive("myDirective", function() {
    // ...
    scope: {
        myModel = "=",
        modelName = "myModel"
        // ...
    }
    // ...
});

app.directive("ngModelDirective", function() {
    // ...
    // ...
    transclude: true,
    link: function(scope, element, attrs) {
        var modelName = scope.modelName;
        console.assert(modelName, '`modelName` must be set when using `ngModelDirective`.');
        // TODO: Check if `scope[modelName]` is actually bound
        doSomethingFancyWith(scope, modelName);
    }
});

模板示例:

<myDirective ngModelDirective my-model="..." />

请注意，doSomethingFancyWith 可以读写模型变量，并绑定(bind)到外部世界。