0

所以我试图让一个指令可以填充一个 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 更新：

http://plnkr.co/edit/JXHlIujuNArJYasrklTG?p=preview

4

1 回答 1

0

首先，您到 ui-bootstrap 的链接不起作用，因此您的弹出窗口不起作用，所以我将其更改为

<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 loos

<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

我还没有看过弹出框功能。出现一个弹出框，但我不知道它是否包含正确的数据。

于 2014-07-19T09:36:13.993 回答