Question

所以我试图让它成为一个指令可以填充一个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

Answer 1

首先，你的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

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

如何获得具有角度指令和角度引导的按钮组的ui-view

1 个答案: