2指令在一个引导的形式，组不工作

Question

我有一个引导的形式基，其中我有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 separatein形式没有任何问题，但每当我使用它像这样 第二个SW-文本框不呈现

可能是什么原因？

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> 

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