一个 bootstrap 表单组中的 2 个指令不起作用

Question

我有一个 bootstrap 表单组，其中我有 2 个指令

<div class="form-group">
                        <label for="Name" class="col-md-2">Name</label>
                        <sw-textbox id="Name" sw-class="col-md-3" sw-model="Entity.Name" />


                        <label for="Family" class="col-md-2">Family</label>
                        <sw-textbox id ="Family" sw-class="col-md-3" sw-model="Entity.Family" />

                    </div>

我的指令就像

app.directive('swTextbox', function () {
    return {
        restrict: 'E,A',
        scope:
            {
                swModel: '=',
                swWidth: '=',
                swHeight: '=',
                swNullable: '=',
                swReadonly: '=',
                swDisable: '=',
                swVisible: '=',
                swMultiline: '=',
                swClass: '@',
                swChangedValue: '&changedvalue'
            },
        template: '<input type="text" dir="rtl" ng-model="swModel" ng-model-options="{updateOn: \'blur\'}" ng-change="swChangedValue({newVal: swModel})" />',
        link: function (scope, el, attr) {
            if (scope.swMultiline) {
                var htm = '<textarea dir="rtl"  ng-model="swModel" ng-model-options="{updateOn: \'blur\'}" ng-change="swChangedValue({newVal: swModel})"';
                if (angular.isDefined(attr.id))
                    htm += 'id="' + attr['id'] + '"';
                if (scope.swDisable)
                    htm += ' disabled';
                if (scope.swReadonly)
                    htm += ' readonly';
                if (scope.swHeight != undefined || scope.swWidth != undefined || scope.swNullable != undefined) {
                    htm += ' style="';
                    if (scope.swHeight != undefined)
                        htm += 'max-height:' + scope.swHeight + 'px; height:' + scope.swHeight + 'px;';
                    if (scope.swWidth != undefined)
                        htm += 'max-width:' + scope.swWidth + 'px; width:' + scope.swWidth + 'px;';
                    if (scope.swReadonly == undefined && scope.swDisable == undefined && scope.swNullable != undefined)
                        htm += 'background-color:#fcf3f8;';
                    htm += '"';
                }
                htm += '></textarea>';
                el.find('input').replaceWith(htm);
            }
            else {
                scope.$watch('swWidth', function (newValue, oldValue, scope) {
                    el.find('input').css('width', newValue);
                });
                scope.$watch('swNullable', function (newValue, oldValue, scope) {
                    el.find('input').css('background-color', (!newValue) ? '#fcf3f8' : '');
                });
                scope.$watch('swReadonly', function (newValue, oldValue, scope) {
                    el.find('input').attr('disabled', newValue);
                    el.find('input').css('background-color', (newValue) ? '#f3f3f3' : (scope.swNullable == undefined || scope.swNullable) ? '' : '#fcf3f8');
                });
                scope.$watch('swDisable', function (newValue, oldValue, scope) {
                    el.find('input').attr('disabled', newValue);
                    el.find('input').css('background-color', (newValue) ? '#f3f3f3' : (scope.swNullable == undefined || scope.swNullable) ? '' : '#fcf3f8');
                });
                scope.$watch('swVisible', function (newValue, oldValue, scope) {
                    if (newValue != undefined)
                        el.find('input').css('display', (newValue) ? '' : 'none');
                });
                scope.$watch('swClass', function (newValue, oldValue, scope) {
                    if (newValue != undefined)
                        el.find('input').addClass(newValue);
                });
            }
        }
    };
});

当我单独使用 sw-textbox 时没有任何问题但是每当我这样使用它时第二个 sw-textbox 没有渲染

可能是什么原因？？

Answer 1

使用拖尾斜线是可能的问题。尝试使用结束标记。

<div class="form-group">
    <label for="Name" class="col-md-2">Name</label>
    <sw-textbox id="Name" sw-class="col-md-3" sw-model="Entity.Name"></sw-textbox>
    <label for="Family" class="col-md-2">Family</label>
    <sw-textbox id ="Family" sw-class="col-md-3" sw-model="Entity.Family"></sw-textbox>
</div>

看看这个快速插件 http://plnkr.co/edit/ZX4sgkoaKbBZxOGKsLTQ

一个 bootstrap 表单组中的 2 个指令不起作用

2 directive in one bootstrap form-group not working

directive

twitter-bootstrap

angularjs

angularjs-directive