角输入格式化/分析器指令和插补属性？ [英] angular input formatter/parser directive and interpolated attributes?

问题描述

我试图写施加到一个输入元件，这需要ngModel一个可配置的指令，并增加了一个分析器和用于ngModel格式化功能

我遇到的问题是，我似乎无法插入值传递到指令，同时支持ngModel约束力。举例来说，我希望能够用我的指令两种方法之一：

通过文字参数：

 ＆LT;输入NG模型=富我-指令=120/＆GT;
 

或通过插值参数从目前的范围：

 ＆LT;输入NG模型=富我-指令={{栏}}/＆GT;...
功能MyCtrl（$范围）{
  $ scope.bar =120;
}
 

如果我读了我的指令定义链接功能的属性参数，我可以得到attributes.myDirective的值在第一次使用，但在第二次使用myDirective的值是不确定的。

现在，如果我一个孤立的范围内添加到指令定义：

 范围：{myDirective：'@'}
 

然后scope.myDirective被定义，并在场景上述内插，但现在ngModel被打破了。我的解析器/格式化功能，为他们的输入参数传递未定义。这是怎么回事，我怎么能实现我想要的行为？

指令：

  module.directive（'myDirective'，函数（）{
        返回{
            限制：'A'，
            要求：'ngModel'，
            更换：假的，
            链接：功能（范围，榆树，ATTRS，CTRL）{// attrs.myDirective不插
 

解决方案

当您添加隔离范围，您正在创建全新的子作用域不从与 ngModel范围继承的它的价值。这就是为什么你的解析器和格式化越来越不确定。

另外，在你的榜样，以获得在栏的价值，你不需要它在大括号：

 ＆LT;输入NG-模式='富'我-指令='酒吧'/＆GT;
 

而在你的链接功能：

 链接：功能（范围，元素，属性CTRL）{
  attr.myDirective =='吧。
  范围。$的eval（attr.myDirective）== //任何的'酒吧'的值是在当前范围内
}
 

所以，你不需要分离范围。只需使用范围。$ EVAL 来评价传递给你的指令除权pression。

这里有一个快速小提琴。

I am attempting to write a configurable directive that is applied to an input element, which requires ngModel, and which adds a parser and a formatter function for ngModel.

The problem I'm having is that I can't seem to pass interpolated values into the directive while simultaneously supporting ngModel binding. For instance, I want to be able to use my directive in one of two ways:

passing literal arguments:

<input ng-model="foo" my-directive="120" />

or passing interpolated arguments from the current scope:

<input ng-model="foo" my-directive="{{bar}}" />

...
function MyCtrl($scope) {
  $scope.bar = "120";
}

If I read the attributes argument of the link function in my directive definition, I can get the value of attributes.myDirective in the first usage, but in the second usage the value of myDirective is undefined.

Now, if I add an isolated scope to the directive definition:

scope: { myDirective: '@' }

Then scope.myDirective is defined and interpolated in the scenarios above, but now ngModel is broken. My parser/formatter functions are passed undefined for their input arguments. What's going on, and how can I implement the behavior I want?

directive:

module.directive('myDirective', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            replace: false,
            link: function (scope, elm, attrs, ctrl) { // attrs.myDirective not interpolated

解决方案

When you add the isolate scope, you're creating brand-new child scope that doesn't inherit from the scope with the ngModel's value in it. That's why your parsers and formatters are getting undefined.

Also, in your example, to get at the value of bar, you don't need it in curly braces:

<input ng-model='foo' my-directive='bar' />

And in your linking function:

link: function(scope, element, attr, ctrl) {
  attr.myDirective == 'bar'.
  scope.$eval(attr.myDirective) == // whatever the value of 'bar' is in the current scope
}

So you don't need the isolate scope. Just use scope.$eval to evaluate the expression passed to your directive.

Here's a quick fiddle.

这篇关于角输入格式化/分析器指令和插补属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！