0

1 つのタグで Twitter ブートストラップ コンポーネントを使用できるようにするディレクティブを作成したいと考えています。

タグは次のようになります。

                <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 が適切に割り当てられません。

EDITモデルへのアクセスが機能するようになりました。しかし、ng-class 属性はまだ正しく評価されていません。

4

2 に答える 2

0

OK、ついに解決策が見つかりました

div コントロール グループをさらに div でラップしました。今では動作します。

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

http://jsfiddle.net/JNgN2/6/も参照してください

于 2012-12-26T14:10:29.857 に答える
0

$コンパイルを使用します。トランスクルードは私見では必要ありません：

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-26T12:26:34.913 に答える