Question

我正在尝试使用angularjs中的html表单创建自定义弹出窗口。这个想法是，当用户按下带有弹出键的按钮时，它会在里面显示5个单选按钮。选中单选按钮时，每个单选按钮都会在按钮下方打印一条消息。

这是指令代码：

var customPopoverApp=angular.module('customPopOverApp',[]);

customPopoverApp.directive('customPopover',['$compile','$templateCache',function($compile,$templateCache){
   return {
       restrict:'A',
       transclude:true,
       template:"<span>Click on me to show the popover</span>",
       link:function(scope,element,attr){
            var contentHtml = $templateCache.get("customPopover.html");
            contentHtml=$compile(contentHtml)(scope);
            $(element).popover({
            trigger:'click',
            html:true,
            content:contentHtml,
            placement:attr.popoverPlace
       });
   }
};
}]);

这是主要的html模板： Popover测试

<div class="navbar navbar-default menu-nav" role="navigation">
    <ul class="nav navbar-nav navbar-left">
        <li>
          <button custom-popover="" popover-place="bottom">click on me to show the popover</button>
        </li>
    </ul>
    </div>
 </div>
 <script type="text/ng-template" id="customPopover.html">
     <h2>Organizacion de la tabla</h2>
     <div class="radio">
         <label>
             <input type='radio' ng-checked="option1" ng-click='showMessage("Option 1 checked")'/>&nbsp;Option 1<br/>
        </label>
    </div>
    <div class="radio">
        <label>
            <input type='radio' ng-checked="option2" ng-click='showMessage("Option 2 checked")'/>&nbsp;Option 2<br/>
        </label>
    </div>
    <div class="radio">
        <label>
            <input type='radio' ng-checked="option3" ng-click='showMessage("Option 3 checked")'/>&nbsp;Option 3<br/>
       </label>
    </div>
    <div class="radio">
        <label>
            <input type='radio' ng-checked="option4" ng-click='showMessage("Option 4 checked")'/>&nbsp;Option 4<br/>
        </label>
    </div>
    <div class="radio">
        <label>
            <input type='radio' ng-checked="option5" ng-click='showMessage("Option 5 checked")'/>&nbsp;Option 5<br/>
        </label>
    </div>
</script>
<div ui-view></div>

以下是带有完整示例的plunker：

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

popover工作得很好......第一次。如果我关闭popover并再次打开，就好像从未编译过

你们有没有人知道为什么弹出窗口第二次不起作用？

弹出窗口内的Html表单

0 个答案: