javascript - 在 AngularJS 中动态添加指令

Question

我想在用户单击按钮时动态添加指令，但遇到了一些问题。实现这一目标的最佳方法是什么？

在我的研究中，我发现了 element.bind (来自 jqLit​​e)，但我在互联网上没有找到很多示例。

这是我的代码:

---

HTML 代码

<div class="form-group">
    <button class="btn btn-info" ng-click="addAttr()">Add Atributtes</button>
</div>
<addattributes options="attributes" attr="obj"></addattributes>

<小时/> ANGULARJS 指令

.directive('addattributes', function () {
return {
    restrict: 'E',
    scope: {
        attributes: '=options',
        attr: '='
    },
    template: 
    '<div ng-class="classInput">' +
    '   <div class="col-md-8" style="padding-left: 0;">' +
    '       <label>Nome do Atributo</label>' +
    '       <input type="text" class="form-control" placeholder="Attrs name" ng-model="attrname" ng-change="validation()">' +
    '   </div>' +
    '   <div class="col-md-4" style="padding-right: 0;"> ' +
    '       <label>Tipo do Atributo</label> ' +
    '           <select class="form-control" ng-options="attribute.name for attribute in attributes" ng-model="attrtype"></select>' +
    '   </div> '+
    '   <div class="clearfix"> '+
    '   <div> '+
    '   <button type="button" class="btn btn-default btn-xs pull-right" ng-click="changeButton()" style="margin-top: 1em;" ng-show="showBtn == true"> Adicionar </button>       ' +
    '   </div> {{attr}}'+
    '</div>',
    link: function(scope,element,attrs){
        scope.showBtn = true;
        scope.classInput = 'form-group';
        scope.attrtype= scope.attributes[2];

        scope.changeButton = function(){
            scope.showBtn = false;
            scope.attr = {
                name: scope.attrname,
                type: scope.attrtype
            };
        }

        scope.validation = function(){
            if(scope.attrname.length < 6) {
                scope.classInput = 'form-group has-error';
            } else {
                scope.classInput = 'form-group has-success';
            }
        }


    }
};})

提前致谢，祝您有美好的一天!

Answer 1

您没有在 Controller 中“添加指令”。这意味着您正在操纵 DOM，这是您不应该做的。

相反，请根据 ViewModel 进行思考。该指令显示/改变什么 ViewModel 属性？假设它是一个“属性”，因此将 attribute 添加到 $scope.myAttributes (以避免与您拥有的某些 attributes 属性发生名称冲突) 数组。

$scope.myAttributes = [];
$scope.addAttr = function(){
   $scope.myAttributes.push({}); // empty object to hold some property of an "attribute"
}

然后，在 View 中，对属性进行ng-repeat:

<div class="form-group">
    <button class="btn btn-info" ng-click="addAttr()">Add Atributtes</button>
</div>
<addattributes ng-repeat="attribute in myAttributes" attr="attribute"></addattributes>

(我不完全理解您的 addattributes 指令的作用，因此我假设它通过 attr 设置属性对象)