所以我试图让它成为一个指令可以填充一个btn组,但有问题。如果我将btn btn-default类放在指令html中,它将正确分组,但按钮会嵌入到其他按钮中。 如果我将btn btn-default类放入模板(在按钮标记中),那么它就不能正确分组。
查看定义
<search search-id='emailBox' search-name='Email Address' search-desc='Enter Email Address' search-array='[{fieldId: "searchEmailAddress", fieldDefaultText:"Email Address"}]'></search>
<search search-id='endUserBox' search-name='End User Account' search-desc='Enter Search Type, Submitter, and Account Number' search-array='[{fieldId: "searchSubId", fieldDefaultText:"Submitter ID"},{fieldId: "acctNum", fieldDefaultText:"Account"}]'></search>
搜索指令模板
<button id='{{searchId}}' class='btn btn-default' rel='popover' popover-append-to-body='true' popover-template='search{{searchId}}' popover-placement='right' popover-title="{{searchName}}">{{searchName}}</button>
<script id="search{{searchId}}" type="text/ng-template">
<form class='form-horizontal'>
<fieldset>
<div class='control-group'>
<label class='control-label' for='{{searchId}}'></label>
<div class='controls'>
<input ng-repeat="field in fieldArray"
id='{{searchId}}{{field.fieldId}}'
name='{{field.fieldId}}'
type='text'
placeholder='{{field.fieldDefaultText'
class='input-medium'>
<input type='submit' style='height: 0px; width: 0px; border: none; padding: 0px;' hidefocus='true'/>
</div>
</div>
</fieldset>
</form>
</script>
指令代码
.directive('search', function(){
return {
restrict: 'E',
templateUrl: 'search/search.tpl.html',
scope: {
searchId: '@',
searchName: '@',
searchDesc: '@',
fieldArray: '@'
}
};
})
这也是基于ui-router的ui-view嵌入的一个问题,它可以根据状态动态加载按钮。
更新了一个plunker:
答案 0 :(得分:0)
首先,你的ui-bootstrap链接不起作用,因此你的popover不起作用 我把它改成了
<script data-require="angular-bootstrap@*" data-semver="0.11.0" src="https://rawgit.com/jbruni/bootstrap-bower-jbruni/master/ui-bootstrap-tpls.js"></script>
如果在指令中使用replace = true,则分组效果更好,但由于与隔离范围冲突,弹出窗口不起作用。 因此,我将您的指令更改为属性而不是作为元素调用,因为在这种情况下,它更适合使用boostrap 这是现在的指令
.directive('search', function(){
return {
templateUrl: '/search.tpl.html',
scope: {
searchId: '@',
searchName: '@',
searchDesc: '@',
fieldArray: '@'
}
};
})
和Html像这样安慰
<div search search-id='emailBox' class='btn-group' search-name='Email Address' search-desc='Enter Email Address' search-array='{"searchEmailAddress":{"fieldDefaultText": "Email Address"}}'></div>
<div search search-id='endUserBox' class='btn-group' search-name='End User Account' search-desc='Enter Search Type, Submitter, and Account Number' search-array='{"searchSubId":{"fieldDefaultText":"Submitter ID"},"acctNum": {"fieldDefaultText":"Account"}}'></div>
这是Plunker
我还没有看过弹出窗口功能。出现一个弹出框,但我不知道它是否包含正确的数据。