2

我有一个相当简单的 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 控制器吗?

4

1 回答 1

4

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

笨蛋

于 2013-03-08T20:03:55.423 回答