Question

我有一个包含字段集的表单，Form可以有不同数量的字段集，所以我在表单中添加了更多按钮。可能存在表单没有字段集的情况。为了满足这些要求，我需要有指令继承。将在按钮单击事件上添加fieldset指令。 Fieldset有一个模板，但实际的输入字段HTML字符串来自页面加载时的服务器。因此，我需要通过附加具有不同id的输入框来动态完成fieldset，然后将此字段集添加到表单中。

为了更好地解释这种情况，我缩小了我的实现并创建了下面的代码段，这里是plunker。

在按比例缩小的方案中，页面加载时只存在form-Dir指令。该指令有一个按钮，用于增加id的字段。

<body ng-app="mainApp" ng-controller="MainCtrl">
        <div form-dir this-page="page" bind-field-id = "fieldId" bind-first-name="firstName" >
            This is {{page}} page
            <button class='btn-add'> add isolated fields </button>
            <div class='field'>

            </div>
        </div>
</body>

脚本

var app = angular.module('mainApp', []);

app.controller("MainCtrl", function($scope){
    $scope.page = "Demo"
    $scope.fieldId = "2"
    $scope.firstName = "John"


});

app.directive("formDir", function($compile) {

    return {
        restrict:'A',
        transclude: false,
        scope:{
            page:"=thisPage",
            id:"=bindFieldId",
            firstName:"=bindFirstName"
        },
        link : function(scope, element, attrs){
            scope.page = 'demo2';

            element.find('.btn-add').bind('click', function(e){
                var field = angular.element(e.currentTarget).siblings('.field')

                var newScope = scope.$new();

                var ele = '<field-dir bind-field-id = "id" bind-first-name="firstName"></field-dir>';

                var directive = $compile(ele)(newScope);

                field.append(directive);

                console.log('btn clicked', field)
            })
        }
    };
});

app.directive("fieldDir", function() {

    return {
        restrict:'AE',
        transclude: true,
        replace: true,
        scope:{
            id:"=bindFieldId",
            firstName:"=bindFirstName"
        },
        template: '<div></div>',
        link : function(scope, element, attrs){

            element.append('<label>{{scope.id}} First Name fields </label>'
                +' <input type="text" class="textbox" ng-model="firstName">'
                +' <button class="btn-change">change first name</button>');

            element.find('.btn-change').bind('click', function(e){
                scope.$apply(function(){
                    scope.firstName = "Doe";
                    scope.id = parseInt(scope.id) + 1;
                });


                console.log(scope)
            })

        }
    };
});

如果我在模板中放置label，input和button标记，代码就会生效;但根据我的情况，我需要追加它。我无法弄清楚我做错了什么。

Answer 1

我明白了。在添加HTML字符串字段之前，我需要做的就是$ compile。

替换

element.append('<label>{{scope.id}} First Name fields </label>'
 +' <input type="text" class="textbox" ng-model="firstName">'
 +' <button class="btn-change">change first name</button>');

与

var r = $compile('<label>{{id}} First Name fields </label>'
    +' <input type="text" class="textbox" ng-model="firstName">'
    +' <button class="btn-change">change first name</button>')(scope)

element.append(r);

孤立子指令中的双向数据绑定

1 个答案: