是否有可能增加angularized HTML标签和属性的基础上，Angularjs模型数据指令？ [英] Is it possible to add angularized html tags and attributes in a directive based on model data in Angularjs?

问题描述

我想建立一个指令，将建立基础的设置，包括输入类型，绑定模型，HTML属性嵌套的对象表单输入。我一直在敲打我的头，也许是接近结束，这是什么角度不具备做。我想建立一个可以采取的对象像数组的指令：

I want to build a directive that will build form inputs based on a nested object of settings that include the input type, model to bind, and html attributes. I have been pounding my head and, perhaps, am close to concluding that this is something Angular is not equipped to do. I would like to build a directive that could take an array of objects like:

[{
    "label":"When did it happen",
    "model": $scope.event.date,
    "element":"input",
    "type": "date",
    "options":{
       "class":"big",
       "required": true,
     },
  },{
    "label":"How did it happen?",
    "model": $scope.event.cause,
    "element":"textarea",
    "options":{
      "cols":45,
      "rows":55,
    },
  },{
    "label":"How many times did it happen?",
    "model": $scope.event.times,
    "element":"input",
    "options":{},
  }],

我已经通过指令许多不同方面的努力。我一直跨越几个问题上运行。

I have struggled through many different aspects of directives. I keep running across a few issues.

• 无论是模板，也不控制器指令功能可以访问任何类型的范围，可以达到任何类型的数据 - 最特别的是我的阵列我做了。这意味着，我不能决定如何构建我的DOM（即标签类型和属性），直到后来。


• 所有的编译是链接功能之前完成。我能够操纵在链接功能的DOM，但它都没有angularized。这意味着，如果我添加了一个必需属性角度的ngValidate是没有意识到这一点。如果我尝试改变标签类型，我重置失去我的模型绑定等。

看来，这仅仅是路角运行。有没有影响到基于模型的数据，DOM标签类型和属性，而不指定所有的东西具体地没有好办法？

It seems that this is just the way angular runs. Is there no good way to affect the DOM tag types and attributes based on model data without specifying everything out specifically?

推荐答案

如何是这样的：

$scope.event = {
    date: new Date(),
    cause:'It was the colonel in the kitchen with the revolver',
    time:5, //...
    $metadata: data
};

其中，数据在这里仅仅是你已经显示的数组。 （除了这也只是重新$ P $字符串psenting事件的性质，像这样的模型属性：

Where data here is simply the array you have already shown. (apart from the model property which would just be a string representing the property of the event, like so:

{
    "label":"When did it happen",
    "model":'date',
    "element":"input",
    "type": "date",
    "options":{
      "class":"big",
      "required": true,
     }
}

那么你的指令将简单地访问给它的父作用域属性。 （事件）和处理元数据到可用模板。这样就可能会被编译。

Then your directive would simply access the property given it on the parent scope. (event) And process the metadata into a usable template. Which could then get compiled.

下面是这样的指令，并且该指令...

Here is such a directive, and the directive...

myApp.directive('contentForm',function($compile,$interpolate){
  var template = "<span class='lbl'>{{label}}</span><{{element ||'input'}} {{options}}"+
             " ng-model='{{root+'.'+model}}'></{{element}}>";                 

  function linkerFunction(scope,element,attrs){
    if(!scope[attrs.contentForm])return;
    var metadata = scope[attrs.contentForm].$metadata || false;
    if(!metadata)return;
    element.html(getHtml(metadata,attrs.contentForm));
    $compile(element.contents())(scope);
  }
  return {
    restrict: 'A',
    replace: true,
    link:linkerFunction
  };
  //interpolate the template with each set of metadata
  function getHtml(metadata,root){
    var interpolation = $interpolate(template);
    var html = '';
    if(angular.isArray(metadata)){
      for(var i = 0; i < metadata.length; i++){
        metadata[i].root = root;
        metadata[i].options = processOptions(metadata[i].options);
        html += interpolation(metadata[i]) + '</br>'
      }
    }else{
      html = interpolation(metadata);
      metadata.options = processOptions(metadata.options);
    }
    return html;
  }                
  // parse object into html attributes 
  function processOptions(options){
    var result = '';
    for(var key in options){
      if(options.hasOwnProperty(key)){
        result += ' '+key+"='"+options[key]+"'"
      }
    }
    return result.trim();
  } 
});

您很可能要更改的模板。我似乎已经忘记了放在一个类型。但是，这应该是相当直截了当。我希望这有助于！

You'd probably want to change the template. I seem to have forgotten to put in a type. But that should be fairly straight forward. I hope this helps!

这篇关于是否有可能增加angularized HTML标签和属性的基础上，Angularjs模型数据指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！