javascript - 嵌套指令中的 AngularJS 格式化程序

Question

关于嵌套指令中的格式化程序，我有一个非常奇怪的问题。

我想要一个用于格式化的 modelType 指令。
如果我不检查“modelType”，它就可以工作。
所有 View 值都更改为“格式化:...”。

但是如果我实现 if (attrs.modelType == "testType") { ... } 它不会工作，但我不知道为什么。

myApp.directive('modelType', function(){
return {
restrict: 'A',
require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      if(attrs.modelType == "testType") {
      ngModel.$formatters.push(function(value){
        //formats the value for display when ng-model is changed
        return 'Formatted: ' + value; 
      });
      ngModel.$parsers.push(function(value){
        //formats the value for ng-model when input value is changed
        return value.slice(11); 
      });
    }
  }
};

有人知道这个问题吗？

http://jsfiddle.net/nkop2uq0/2/

Answer 1

首先，在外部和内部指令中使用属性 model-type 导致内部的链接函数被执行两次(一次用于 Controller 拥有的 HTML，一次用于模板 HTML)，覆盖你的格式。因此，您需要(或者至少我认为您应该)通过为内部指令使用不同的属性来解除这两个指令的属性:

 template: '<div><input type="text" ng-model="ngModel" my-type="modelType" /></div>'

并因此将内部指令重命名为

 myApp.directive('myType', function(){ 

接下来，由于内部指令现在不再被外部指令的编译步骤调用，您需要在后链接函数中编译内部指令的模板

可以这样做:

 link: function (scope, element){
    $compile(element.innerHtml)(scope)
 }

这导致 attrs 始终相同，因此您不能使用它来测试您的 testType:

$$element: U[1]
$$observers: Object
$attr: Object
myType: "modelType"  <-- see here
ngModel: "ngModel"
type: "text"

因此您需要在 scope 中寻找实际值:

if(scope.modelType == "testType") {

最后(坦率地说，如果有人能向我解释这一点，我会很高兴，我不明白)，我必须在外部指令中将 modelType 范围属性定义为单向绑定(bind)通过

modelType: '@modelType'

我把它放在一个更新的 fiddle 里:http://jsfiddle.net/nkop2uq0/8/

注意:我远未理解 Angular 指令的复杂性。尽管我喜欢这个框架，但实现目标的方式之多令人难以置信。所以你应该尝试改进我的答案，这很可能不是最佳实践。如果你在那里发现坏主意，请给我写信......