一尘不染

如何在AngularJS中使用动态模板创建指令?

angularjs

如何使用动态模板创建指令?

'use strict';

app.directive('ngFormField', function($compile) {
return {
    transclude: true,
    scope: {
        label: '@'
    },
    template: '<label for="user_email">{{label}}</label>',
    // append
    replace: true,
    // attribute restriction
    restrict: 'E',
    // linking method
    link: function($scope, element, attrs) {
        switch (attrs['type']) {
            case "text":
                // append input field to "template"
            case "select":
                // append select dropdown to "template"
        }
    }
  }
});



<ng-form-field label="First Name" type="text"></ng-form-field>

这就是我现在所拥有的,它可以正确显示标签。但是,我不确定如何在模板上附加其他HTML。或将2个模板合并为1个。


阅读 200

收藏
2020-07-04

共1个答案

一尘不染

有类似的需求。$compile做这份工作。(不完全确定这是否是“ THE”方法,仍然可以通过角度进行工作)

http://jsbin.com/ebuhuv/7/edit-我的探索测试。

需要注意的一件事(以我的示例为例),我的要求之一是,type一旦单击“保存”,模板将根据属性进行更改,并且模板非常不同。因此,尽管如此,您获得了数据绑定,如果在那里需要新的模板,则必须重新编译。

2020-07-04