angularjs - 在指令的嵌套 ngModel 中控制 $viewValue 的设置

Question

我有一个相当简单的 UI 控件，我将它建模为指令，它是一个电话号码编辑器，有两个输入字段：一个用于国家代码，另一个用于号码。

该指令的用法如下所示：

<phone-editor ng-model='phoneNo'></phone-editor>

在指令的声明中，我需要 ngModel，模板如下所示：

<input type="text" ng-model="countryCode" />
<input type="text" ng-model="number" />

很清楚如何将原始模型组合和分解为两个字段。

我无法弄清楚的是 - 我如何为第二个字段使用格式化程序，以便它显示(555) 555-5555而不是纯数字，而不定义另一个指令来访问第二个输入字段的 ngModel 控制器？

我可以以某种方式访问​​子 ngModel 控制器吗？

Answer 1

我在 Angular 代码库上进行了一些搜索，发现了一些应该可以工作的东西：

app.directive('phoneEditor', function() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div>'
      + '<input type="text" ng-model="countryCode">'
      + '<input type="text" ng-model="number">'
      + '</div>',
    link: function(scope, element) {
      scope.number = 555;
      var input1 = element.find('input').eq(0);
      var input2 = element.find('input').eq(1);
      input1Ctrl = input1.controller('ngModel');
      input2Ctrl = input2.controller('ngModel');
      console.log(input1Ctrl, input2Ctrl);
    }
  };
});

笨蛋。