如何获得一个带有角度指令和角度引导的按钮组的 ui-view答案

【问题标题】：How do I get a ui-view that is a button group with angular directive and angular bootstrap如何获得一个带有角度指令和角度引导的按钮组的 ui-view
【发布时间】：2014-07-19 17:36:13
【问题描述】：

所以我试图让指令可以填充 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

【问题讨论】：

在隔离范围内声明 fieldArray 但在 Html 中使用 searchArray。
谢谢，我已经修好了。也可能存在与所提出的问题没有直接关系的其他错误。例如，我仍然没有得到支持 html 弹出窗口的引导程序的自定义构建。
如果你提供一个 plunker 或 fiddle 会容易得多，

标签： angularjs angular-bootstrap

【解决方案1】：

首先，您的 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 就像这样

<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

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

【讨论】：