簡體   English   中英

如何在指令中向子元素添加屬性

[英]How to add attributes to child element in directive

我有以下plunkr:

http://plnkr.co/edit/M1uwZxZP7sXp5sPw7pxf?p=preview

我想做的是:我想構建一個角度代碼來自動生成表單內的輸入,給定一個帶有描述示例的json:

{'name': 'username', 'description': ['text', 'maxlength=16', 'required']}

為此,我使用了一個自定義指令,該指令將輸入追加到標簽中

<custominput></custominput>

<custominput>
   <input type='text'/>
</custominput>

然后,我添加其他任何驗證屬性,例如minlength和maxlength。

在我的plunkr中,我可以將屬性添加到custominput標記中,如下所示:

<custominput compiled="compiled" disabled="disabled"></custominput>

但是如何將這些屬性添加到輸入標簽(即custominput的子級)中?

更新1

這個問題可以概括為:

如何從指令中添加帶有角度指令的HTML元素/屬性

示例:轉動

<form name="form0">
    <input custom-directive>
</form>

到這個:

<form name="form0">
    <input custom-directive type="text" ng-model="ctrl.username" ng-maxlength="15" ng-required="required">
</form>

從指令

您可以將它們添加到指令的模板部分。 參見下面的代碼:

HTML代碼

<form>
    <input custom-directive>
</form>

指令代碼(我只是將其寫在腦海中,它可能無法完成復制粘貼工作,但肯定會朝正確的方向發展)。

app.directive('customDirective', function() {
  return {
    restrict: 'A',
    controller: function($scope, attrService) {
      $scope.attributes = attrService.getAttrs;
    },
    link: function(scope, element, attrs) {
      element.attr('name', scope.attributes.name);
      // add more attributes
      console.log(scope.attributes) // ensure attributes is being pushed through from directive controller.
    }
  }
});

動態添加屬性

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM