Question

我正在尝试制作一些通用字段并使用指令。例如，我在HTML代码中定义：

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

此字段可以是两种类型：简单元素（作为前两个）或元素列表（作为第三个）。范围变量包含所有字段及其类型的定义。为此，我创建了指令“def-field”：

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;
}

问题是我需要从scope变量中获取fieldType，并且scope函数在compile函数中不可用。是否有可能解决这个问题？

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

Answer 1

在阅读了一些关于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);
        };
    }]);
})();

然后，我可以注入此服务并在我的指令中使用 compile 或 prelink 或 postlink 函数：

(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);
                    }
                };
            }
        };

    }]);

})();

因此，在创建指令时会有一些日志记录。此日志记录证明，所需数据已在编译， prelink 和 postlink 指令函数中成功检索到服务：

请注意：我不确定，是否可以使用服务， factory 或提供商用于提供数据。我只展示了服务的可行性。我想，使用 factory 和 provider ，逻辑是一样的。

将值传递给指令中的compile函数

1 个答案: