AngularJS와 지침 트위터 부트 스트랩

나는 나에게 하나 개의 태그에 트위터 부트 스트랩 구성 요소를 사용 할 수 있도록하는 지침 구축하려는 :AngularJS와 지침 트위터 부트 스트랩

태그는 다음과 같습니다 :이 지침이

과 같은

   <bootstrapinput 
        model="lastName" 
        key="lastName" 
        localized="Surname" 
        formpath="playerForm.lastName" 
        required> 
       </bootstrapinput>

을

.directive('bootstrapinput', function() { 
    return { 
     restrict:'E', 
     compile:function (tElement, tAttrs, transclude) { 
      var type = tAttrs.type || 'text'; 
      var required = tAttrs.hasOwnProperty('required') ? 'required' : ''; 
      var ngClazz = tAttrs.hasOwnProperty('formpath') ? 'ng-class="{error: ' + tAttrs.formpath + '.$invalid}"' : ''; 
      var html = '<div class="control-group" ' + ngClazz + '>' + 
       '<label class="control-label" for="' + tAttrs.key + '">' + tAttrs.localized + '</label>' + 
       '<div class="controls">' + 
       '<input ng-model="'+tAttrs.model+'" type="' + type + '" id="' + tAttrs.key + '" name="' + tAttrs.key + '" placeholder="' + tAttrs.localized + '" ' + required + ' />' + 
       '</div>' + 
       '</div>'; 

      tElement.replaceWith(html); 


     } 


    } 

});

태그는 컨트롤러에 내장되어 있습니다. 그러나 스코프를 통해 컨트롤러에서 모델에 액세스하면 모델이 비어 있습니다. 또한 ng-class 속성이 평가되지 않습니다. 즉, CSS가 할당되어 있지 않습니다.

편집 모델에 대한 액세스가 작동합니다. 그러나 ng-class 속성은 여전히 제대로 평가되지 않습니다.

출처

2012-12-26 Soccertrash

참조하십시오. – Humberto

'ng-class' 속성에서 무엇을 기대합니까? ngClazz 변수를 기반으로'ng-class'는'formpath' 속성이 있으면 빈 문자열입니다. – Humberto

양식 요소가 유효하지 않은 경우 (시작 부분에있는 내용) 해당 div의 CSS 클래스가 "오류"(트위터 부트 스트랩에서 사용) 여야합니다. 이 메커니즘은 양식 경로가 설정된 경우에만 활성화됩니다. 생성 된 HTML에서 ng 클래스가 올바르게 설정됩니다. 그러나 어떤 이유로 스타일링이되지 않습니다. – Soccertrash

$ compile을 사용하십시오. transclude은 필요하지 이럴입니다 :

app.directive("bootstrapinput", function($compile) { 
    return { 
     restrict: 'E', 
     scope: { 
      model: '=' 
     }, 
     link: function(scope, element, attrs) { 
      var type = attrs.type || 'text'; 
      var required = attrs.hasOwnProperty('required') ? 'required' : ''; 
      var ngClazz = attrs.hasOwnProperty('formpath') ? 'ng-class="{error: ' + attrs.formpath + '.$invalid}"' : ''; 
      var htmlTemplate = '<div class="control-group" ' + ngClazz + '>' + '<label class="control-label" for="' + attrs.key + '">' + attrs.localized + '</label>' + '<div class="controls">' + '<input ng-model="' + attrs.model + '" type="' + type + '" id="' + attrs.key + '" name="' + attrs.key + '" placeholder="' + attrs.localized + '" ' + required + ' />' + '</div>' + '</div>'; 
      console.log(htmlTemplate); 
      var compiled = $compile(htmlTemplate)(scope); 

      element.replaceWith(compiled); 
     } 
    }; 
});

출처

2012-12-26 12:26:34 asgoth

제안서를 기반으로 솔루션을 수정했습니다. http://jsfiddle.net/b9B8S/3/ CSS 오류 클래스가 여전히 작동하지 않습니다. 게다가 나는 범위를 빠져 나가야 만합니다 : 그렇지 않으면 작동하지 않습니다. – Soccertrash

컴파일 할 때, 대부분의 스타일은 잘 작동하지만 "error"클래스는 여전히 제공되지 않습니다 : http://jsfiddle.net/JNgN2/5 / – Soccertrash

OK, 결국 난 그냥 더 DIV의 DIV 제어 그룹을 포장 한 솔루션

있습니다. 이제 작동합니다.

'<div><div class="control-group" ...>...</div></div>'

당신은 아마도 [$ 컴파일 (http://docs.angularjs.org/api/ng.$compile) 서비스를 사용하여 혜택을 얻을 것 또한 http://jsfiddle.net/JNgN2/6/

출처

2012-12-26 14:10:29 Soccertrash

AngularJS와 지침 트위터 부트 스트랩

답변

관련 문제