將指令中的值傳遞給編譯函數

我正在嘗試製作一些通用字段並使用指令。例如，在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

將指令中的值傳遞給編譯函數

回答

相關問題