停止其他指令的执行我的自定义元素指令 [英] stop execution of other directive on my custom element directive

问题描述

我有一个自定义元素指令例如像下面

i have a custom element directive e.g. like below

  <my-wrapper ng-model="values.abc" unique-check="" list="list" prop="name"> </my-wrapper>

此指令确实需要这就是后来被在内部输入标签设置NG-模型

This directive does require ng-model which is later being set on the inner input tag

  <input type="text" name="myfield" ng-model="'+attrs.ngModel+'"/>

发生的问题是，当我检查控制台我可以看到指令NG-模式是不一样的输入标签NG-模式。

the problem happening is when I check console I can see ng-model on directive is not same as ng-model on input tag.

我怎样才能确保在外部标记中的NG-模式没有创建和我的指令内部创建只有一次。

How can I make sure that the ng-model on outer tag is not created and its created only once inside my directive.

我的指令，code低于

my directive code is below

app.directive("myWrapper", function(){

  var templateFn = function(element, attrs){
    return '<div ng-form="myform">'+
          '<input type="text" name="myfield" ng-model="'+attrs.ngModel+'"/>'+
          '<span>(inside directive) : isDuplicate:{{myform.myfield.$error.isDuplicate}}</span>'
          '</div>';
  }

  return {
    restrict :'E',
    template : templateFn,
    require: 'ngModel',
    scope: true
  }
});

请注意，上面只是一个缩短我的指令版本，我有保留的范围。真正的原因是整体方案中的要求

Please note that above is just a shortened version of my directive, and I have keep scope: true because of requirement in the overall scenario.

如果它不清楚是什么，我说什么，请签本PLUNKER

If its not clear what I am talking about, please checkout the console of THIS PLUNKER

我试着用终端解决方案：真正的和/或优先：1001年这样的NG-模式是不有关该指令的HTML，但只有在输入标签创建的，但他们没有工作。

I tried solutions with terminal : true and/or priority : 1001 so that the ng-model is not created on the directive html but only on input tag, but none of them worked.

是的，一个解决方案可以取代NG-模型可以说在指令我的模型，然后再次将其添加为输入标签NG-模型，但它正在我的应用程序使用的几乎1000的地方，所以真的不会想取代它成为这样的。

yes, one solution can be to replace ng-model with lets say my-model on the directive and then again add it as ng-model on input tag, but then its being used at almost 1000s of places in my app, so really wont like to replace it as such.

任何其他的方式来解决这个问题。

any other way to solve this problem.

推荐答案

您可以尝试使用transclusion。不要试图去做通过标准AngularJS编译突破的努力的一部分，你可以只改变你的结构是这样的：

You could try using transclusion. Instead of trying to do the hard part of breaking through standard AngularJS compilation, you could just change your structure to something like:

<my-wrapper>
    <input name="..." ng-model="...">
</my-wrapper>

，让您的指令扩大了包装与里面transcluded输入您的模板。 （见的 transclude 选项：//$c$c.angularjs.org/1.3.6/docs/api/ng/service/$编译相对=nofollow> $编译文档）。这会增加你的模板可读性为好。

and make your directive expand the wrapper into your template with transcluded input inside it. (See the transclude option in $compile documentation.) This would increase readability of your templates as well.

另外，如果你需要你的指令生成复杂的内容（多输入等）封装所有和绑定到单独的 NG-模型，你可以离开 NG-模型它在哪里，让你的指令完全封装。我的意思是这样的：

Alternatively, if you need your directive to generate complex content (multiple inputs, etc.) all encapsulated and bound to that single ng-model, you could leave the ng-model where it is and make your directive completely encapsulated. By this I mean something like:

.directive('myComplexField', function () {
    return {
        scope: {},
        require: 'ngModel',
        link: function ($scope, $element, $attrs, ngModelCtrl) {
            ngModelCtrl.$formatters.push(function (modelValue) {
                // ... (update your isolated model based on external model change)
            });
            ngModelCtrl.$parsers.push(function (viewValue) {
                // ... (update external model based on your isolated model)
            });
            $scope.$watch('... (properties of your isolated model)', function () {
                // force sync (parser code above will take care of setting the real value)
                ngModelCtrl.$setViewValue(!ngModelCtrl.$viewValue);
            });
        }
    };
})

（见 ngModelController 文档）。你只需要小心，不要创建 $分析器之间的无限循环和 $格式。

如果你真的死心塌地离开 NG-模型你的包装，以及跳过它使用优先级和端子，这是 pretty简单：

If you're really dead set on leaving ng-model on your wrapper and skipping it using priority and terminal, it's pretty simple:

.directive('foo', function ($compile, $timeout) {
    return {
        restrict: 'E',
        priority: 2,  // ngModel priority is 1 (see the docs)
        terminal: true,
        link: function ($scope, $element) {
            $compile($element, undefined, 1)($scope);  // compiles priority *lower than 1*
        }
    };
}

此方法应，如果在所有可能避免的，因为它有许多明显的不足之处，并没有真正的上涨空间。

This approach should be avoided if at all possible, because it has many apparent downsides and no real upside.

这篇关于停止其他指令的执行我的自定义元素指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！