我如何得到一個UI角度是一個帶角度指令和角度引導的按鈕組

所以我試圖讓一個指令可以填充一個btn組，但有問題。如果我將btn btn-default類放在指令html中，它將正確分組，但按鈕插入到其他按鈕中。如果我將btn btn-default類放入模板（在按鈕標籤中），那麼它不能正確分組。我如何得到一個UI角度是一個帶角度指令和角度引導的按鈕組

視圖定義

<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路由器基於UI的視圖的問題嵌入了動態加載按鈕基於狀態。

更新與plunker：

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

來源

2014-07-18 Jon Thompson

在你聲明fieldArray的隔離範圍內，但是你在你的Html中使用了searchArray。 – Edminsson

謝謝，我修復了它。也可能有其他一些與問題沒有直接關係的錯誤。例如，我仍然沒有得到支持html彈出窗口的自定義構建工作。 –

如果您提供了一個重拳或小提琴，它會容易得多， – Edminsson

首先，你的鏈接到用戶界面，引導不起作用，因此你的酥料餅不工作，所以我改成了

<script data-require="[email protected]*" 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 lools這樣

<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-19 09:36:13 Edminsson

我如何得到一個UI角度是一個帶角度指令和角度引導的按鈕組

回答

相關問題