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

我做了一些searches on the Angular codebase并找到了应该有用的东西：

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);
    }
  };
});

Plunker

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

1 个答案: