Twitter bootstrap AngularJS指令推特引导

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


        }


    }

});

指令（'bootstrapinput'，函数（）{ 返回{ 限制：'E'， 编译：函数（远程通讯、tAttrs、转置）{ var type=tAttrs.type | |“text”； var required=tAttrs.hasOwnProperty（'required'）？'required'：''； var ngClazz=tAttrs.hasOwnProperty（'formpath'）？'ng class=“{error:'+tAttrs.formpath+'.$invalid}'：”； var html=''+ ''+tAttrs.localized+''的+ '' + '' + '' + ''; 替换为（html）； } } }); 标签嵌入在控制器中。但如果我通过作用域访问控制器中的模型，则该模型为空。 此外，ng类属性未被计算，即CSS未按其应有的方式分配

---

编辑现在可以访问模型了。但是ng类属性仍然没有正确计算

使用$compile。不需要转包：

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);
       }
   };
});

app.directive（“bootstrapinput”），函数（$compile）{
返回{
限制：'E'，
范围：{
型号：'='
},
链接：函数（范围、元素、属性）{
var type=attrs.type | |“text”；
var required=attrs.hasOwnProperty（'required'）？'required'：''；
var ngClazz=attrs.hasOwnProperty（'formpath'）？'ng class=“{error:'+attrs.formpath+'.$invalid}'：”；
var htmlTemplate=''+''+attrs.localized+''+''+''+''+''；
log（htmlTemplate）；
var compiled=$compile（htmlTemplate）（范围）；
元素。替换为（已编译）；
}
};
});

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

我刚刚将div控制组包装在另一个div中。现在它可以工作了

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

“…”

另见

---

您可能会从使用该服务中受益。您对

ng class

属性有何期望？基于ngClazz变量，如果存在

formpath

属性，则

ng class

将是一个空字符串。如果表单元素无效（如开头所示），则该div的CSS类应为“error”（从twitter引导中使用）。只有在设置formpath时，该机制才应激活。在生成的HTML中，正确设置了ng类。但由于某些原因，样式设置不是。我已经根据您的建议修改了我的解决方案：CSS错误类仍然不起作用。此外，我必须省略作用域：{model:'='}，否则它不能与compile一起工作，大多数样式都可以正常工作，但仍然没有提供“error”类：