0

我想构建一个指令，允许我在一个标签中使用 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。

编辑现在可以访问模型。但是 ng-class 属性仍然没有被正确评估。

4

2 回答 2

0

好的，我终于有了解决方案

我刚刚将 div 控制组包装在另一个 div 中。现在它起作用了。

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

另见 http://jsfiddle.net/JNgN2/6/

于 2012-12-26T14:10:29.857 回答
0

使用 $ 编译。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-26T12:26:34.913 回答