将指令中的值传递给编译函数

我正在尝试制作一些通用字段并使用指令。例如，在HTML代码我定义：将指令中的值传递给编译函数

<div def-field="name"></div> 
<div def-field="surname"></div> 
<div def-field="children"></div>

该字段可以是两种类型：或者简单元件（如前两个）或元素的列表（如第三个）。范围变量包含所有字段及其类型的定义。对于我创建的指令“DEF场”：

app.directive("defField", function($compile, $parse, $http) { 
    restrict: 'A', // only for attributes 
    scope : true, 

    return { 
    restrict: 'A', // only for attributes 
    scope : true, 
    compile: function compile(tElement, tAttributes) { 

     //here I need to detect, which type of field is it. 
     //if it is array, I need to execute the compile code  
     if(fieldType === 'array') { 
     //execute secial code for compile furnction 
     } 

    } 

    if(fieldType === 'array') { 
    //return for array 
    var returnValue = {pre : linkFunction}; 
    } else { 
    //return for normal type 
    var returnValue = { 
     pre : linkFunction, 
     post: function(scope, element, attrs){ 
     $compile(element.parent())(scope); 
     } 
    }; 
    } 
    return returnValue; 
}

的问题是，我需要从范围变量和范围变量的字段类型是不是在编译功能可用。是否有可能解决此问题？

目前，我作为属性传递类型“数组”，但这不是一个可以接受的选项。

来源

2016-05-29 CodeMonkey

在阅读了一些关于Angular的资料后，我设法找到了解决方案。不幸的是，在我的应用程序，大部分的业务逻辑是控制器，根据风格指南这是错误的：

Angular 1 Style Guide by John Papa (business logic)

Angular 1 Style Guide by Todd Motto (business logic)

因此，我提出我的业务逻辑控制器，然后我能够从服务中检索指令中所需的数据。要说明的是，我已经准备了一个小的演示例子：

Link to Plunker

的代码说明： 首先，我定义的服务，这应该检索所需的数据：

(function() { 

"use strict"; 

angular.module("dirExampleApp").service("directiveService", ["$timeout", function ($timeout) { 

     var self = this; 

     self.getObjectData = function() { 
      return $timeout(function() { 

       var responseFromServer = { 
        firstName: { 
         value: "firstValue" 
        }, 
        secondName: { 
         value: "secondValue" 
        }, 
        thirdName: { 
         value: "thirdValue" 
        }, 
        fourthName: { 
         value: "fourthValue" 
        } 
       }; 
       self.content = responseFromServer; 

      }, 300); 
     }; 
    }]); 
})();

然后，我可以注入此服务并将其用于我的指令编译或预链接或后链接功能：

(function() { 

"use strict"; 
angular.module("dirExampleApp").directive("dirExample", ["$log", "directiveService", function ($log, directiveService) { 

     return { 
      restrict: "A", 
      template: "<h3>Directive example!</h3>", 
      compile: function (tElem, tAttrs) { 
       var fieldName = tAttrs.dirExample; 

       $log.log('Compile function: Field with name: ' + fieldName + 
         ' and sevice provided the following data: ' + 
         directiveService.content[fieldName].value); 
       return { 
        pre: function (scope, iElem, iAttrs) { 
         var fieldName = iAttrs.dirExample; 
         $log.log('Prelink function: Field with name: ' + fieldName + 
           ' and sevice provided the following data: ' + 
           directiveService.content[fieldName].value); 
        }, 
        post: function (scope, iElem, iAttrs) { 
         var fieldName = iAttrs.dirExample; 
         $log.log('Postlink function: Field with name: ' + fieldName + 
           ' and sevice provided the following data: ' + 
           directiveService.content[fieldName].value); 
        } 
       }; 
      } 
     }; 

    }]); 

})();

因此，创建指令时会有一些日志记录。此日志记录demonstarates，所要求的数据已经本恩成功地从服务检索编译，预链接和postlink指令的功能：

请注意：我不知道，是否可以使用服务,工厂或提供商为了提供数据的目的。我只展示了如何用服务。我想，工厂和提供商，逻辑是一样的。

来源

2017-01-08 13:15:41 CodeMonkey

将指令中的值传递给编译函数

回答

相关问题