How do I get a ui-view that is a button group with angular directive and angular bootstrap

Question

So I'm trying to make it so that a directive can populate a btn-group, but having problems. If I put the btn btn-default classes in the directive html, it will group properly, but the buttons are inset into other buttons. If I put the btn btn-default classes into the template (in the button tag), then it doesn't group properly.

View Definition

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

Search Directive Template

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

.directive('search', function(){
  return {
    restrict: 'E',
    templateUrl: 'search/search.tpl.html',
    scope: {
      searchId: '@',
      searchName: '@',
      searchDesc: '@',
      fieldArray: '@'
    }
  };
})

This is also a problem with ui-router based ui-view embeds that dynamically load buttons based on state.

Updated with a plunker:

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

In the isolated scope you declare fieldArray but you use searchArray in your Html. — Edminsson, Jul 18 '14 at 15:10
Thanks, I've fixed it. There could be other bugs too that aren't directly related to the question asked. For instance, I still haven't gotten the custom build of bootstrap working that supports html popups. — Jon Thompson, Jul 18 '14 at 15:37
If you supplied a plunker or fiddle it would be much easier, — Edminsson, Jul 18 '14 at 17:36

score 0 · Accepted Answer · answered Jul 19 '14 at 09:36

First, your link to ui-bootstrap does not work and hence your popover does not work so I changed it to

<script data-require="angular-bootstrap@*" data-semver="0.11.0" src="https://rawgit.com/jbruni/bootstrap-bower-jbruni/master/ui-bootstrap-tpls.js"></script>

If you use replace=true in the directive the grouping works better but the popover does not work because of a conflict with isolated scopes. So I changed your directive to be called as an attribute instead of as an element because it works better with boostrap in this case.
This is the directive now

.directive('search', function(){
  return {
    templateUrl: '/search.tpl.html',
    scope: {
      searchId: '@',
      searchName: '@',
      searchDesc: '@',
      fieldArray: '@'
    }
  };
})

and the Html lools like this

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

Here is a Plunker

I haven't looked at the popover functionality. A popover appears but I don't know if it contains the correct data.

How do I get a ui-view that is a button group with angular directive and angular bootstrap

1 Answers1