如何在指令

时间:2015-05-31 19:49:17

标签: javascript angularjs angularjs-directive angularjs-compile

我有以下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

这个问题可归纳为:

如何使用角度指令FROM指令

添加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>

来自指令

1 个答案:

答案 0 :(得分:1)

您可以在指令的模板部分添加它们。请参阅以下代码:

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

动态添加属性