Question

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

我想要一个用于格式化的modelType指令如果我不检查＆＃34; modelType＆＃34;，它可以工作所有视图值都更改为＆＃34;格式化：...＆＃34;。

但如果我实施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导致内部链接函数执行两次（一次用于控制器拥有的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范围属性定义为单向绑定通过

modelType: '@modelType'

我把它放在一个更新的小提琴中：http://jsfiddle.net/nkop2uq0/8/

注意：我对Angular指令的错综复杂很远。尽管我喜欢这个框架，但事情的实现方式令人难以置信。因此，您应该尝试改进我的答案，这很可能不是最佳做法。如果你在那里发现了不好的想法，请给我留言......

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

1 个答案: