控制$ viewValue的设置在指令的嵌套ngModel [英] Control the setting of $viewValue in a directive's nested ngModel

问题描述

我有，我已经建模为一个指令，这是电话号码有两个输入字段的编辑一个相当简单的UI控件：一个是全国code和另一个用于数

I have a fairly simple UI control that I've modeled as a directive, which is an editor for phone numbers that has two input fields: one for the country code and another for the number.

该指令的用法是这样的：

The directive's usage looks like this:

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

在该指令的声明，我需要ngModel和模板看起来是这样的：

In the directive's declaration, I require ngModel and the template looks like this:

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

很显然，如何撰写和分解原始模型这两个字段。

It's clear how to compose and decompose the original model into the two fields.

我想不通的是 - 我怎么使用格式化的第二个字段，这样它显示[phone] 而不是简单的数量，而定义其他指令只是进入第二个输入字段的ngModel控制器？

What I cannot figure out is - how do I use a formatter for the second field such that it displays [phone] instead of the plain number, without defining another directive just to access the ngModel controller of the second input field?

我可以以某种方式进入孩子ngModel控制器？

Can I somehow access the child ngModel controller?

推荐答案

我做了几个<一个href=\"https://github.com/search?q=repo%3aangular/angular.js/src%20ngModel&type=$c$c&ref=searchresults\"相对=nofollow>对角codeBase的搜索和发现的东西应该工作：

I did a few searches on the Angular codebase and found something that should work:

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 。

这篇关于控制$ viewValue的设置在指令的嵌套ngModel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！