Angular UI 弹出窗口关闭按钮不起作用

Question

我使用 angular 指令为复选框单击创建了一个弹出窗口。它工作得很好，但关闭按钮确实有效。这是我的示例代码。

myApp.directive('mypopover', function ($compile,$templateCache,$interpolate) {
var getTemplate = function (contentType,attrs) {
    var template = '';
    switch (contentType) {
        case 'comment':
            var template  = "<div class=''>";
                template += "<form><div class='form-group'>";
                template += "<input type='hidden' value='"+attrs.value+"' name='documentationId' id='documentationId' />";
                template += "<textarea style='width:250px;' class='form-control' name='doc_comment' id='doc_comment'>Selected for Re-Use in 2nd Trade Workflow.</textarea>";
                template += "</div>";
                template += "<div class='form-group'>";
                template += "<input type='button' value='Close' class='btn btn-primary btn-xs' ng-click=\"closePopover()\" />";
                template += "<input type='button' value='Comment' class='btn btn-primary btn-xs pull-right'  />";
                template += "</div></form><br>";
                template += "</div>";
            break;
    }
    return template;
}

return {
    restrict: "EA",
    link: function (scope, element, attrs) {            
        var popOverContent;
        var d = new Date();
        var mm = d.getMonth()+1;

        popOverContent = getTemplate("comment",attrs);

        var options = {
            content: popOverContent,
            placement: "right",
            html: true,
            date: scope.date,
            title:"Date: "+mm+"/"+d.getDate()+"/"+d.getFullYear()
        };
        $(element).popover(options);

        scope.closePopover = function() { //this block doesn't work
            alert("called"); //does not return alert
        }
    }
};
});

html 其中一部分是

<div class="checkbox checkbox-primary">
    <input 
        type='checkbox'                                        
        ng-model='selectedDocIds' 
        mypopover
    />
 </div>

我尝试将 ng-click='closePopover()' 函数绑定到此 html 的主控制器，但它不起作用。我没有得到错误，但只是发生任何事情。

有人可以帮我实现这个 ng-click 事件吗？

谢谢

Answer 1

问题是因为 DOM 是用 html 扩展的 html 而不是 Angular 编译的。

指令注入 $compile 服务似乎是正确的意图。但是没有用到。

   popOverContent = getTemplate("comment", attrs);
   $compile(popOverContent)(scope);//compile new contents bound to the same scope as directive

Answer 2

看看我试图回答你的问题。也许这个 script on plunker 会对你有所帮助。

customDirectives.directive('customPopover', function () {
return {
    restrict: 'A',
    template: '',
    link: function (scope, el, attrs) {
        scope.label = attrs.popoverLabel;
        $(el).popover({
            trigger: 'hover', // or click
            html: true,
            content: attrs.popoverHtml,
            placement: attrs.popoverPlacement
        });
    }
};

});

2015 年 8 月 19 日更新：

另一种解决方案...

我发现按钮“关闭”运行函数“$(element).popover('hide')" 不会调用必须执行的一系列操作，以正确的方式隐藏气泡和切换复选框。所以我查看了“bootstrap.js”，发现“popover”对函数“”进行了所有必需的操作tooltip.toggle()”。此外，此函数仅在页面启动时调用一次，并且仅在事件处理程序中粘贴到复选框。因此，您可以从站点下载 "bootstrap.js"，进行更改并强制执行 bootstrap 以处理更多元素，然后仅处理一个复选框。但这有点奇怪。所以我提议在您当前的代码中只插入一个字符串并删除两个字符串。

查看您的文件“app.js”，第 47 行... 更好，看看 my plunker。这是你的 plunker 的完整副本（分叉副本），但从第 47 行更改了三行。

    scope.closePopover = function() {
      $(element).click();
      // $(element).popover("hide");
      // $(element).attr({checked:false});
    }

解释...

函数“$(element).click()”模拟点击事件。在这种情况下，bootsrap 执行所有需要的操作来隐藏气泡和取消选中复选框。

Answer 3

一种更简单的方法来完成您正在构建的内容可能是在来自 this issue thread

的 Elijen 的 "angular-popover-toggle" 模块之上创建一个模板化的指令

https://github.com/Elijen/angular-popover-toggle

我在 plunker 中做了一个基本的工作演示。然后你只需要将它变成一个可重用的指令。看看：

http://plnkr.co/edit/9QbPMV?p=preview

js

.controller('myCtrl', function($scope){
   $scope.demofor = 'Popover with close button';
   var d = new Date();
   var mm = d.getMonth()+1;
   $scope.title = "Date: "+mm+"/"+d.getDate()+"/"+d.getFullYear();
});

html

<br><br><br>
<div class="container">
  <h4>{{demofor}}!</h4>
  <label>
    Click here
    <input type="checkbox" ng-model="isPopoverOpen"
     popover-template="'tmpl.html'" 
     popover-toggle="isPopoverOpen"
     popover-placement="right"
     popover-title="{{title}}">
  </label>
</div>

<script type="text/ng-template" id="tmpl.html">
  <div>
    <form>
      <div class="form-group">
        <input type="hidden" value="attrs.value" name="documentationId" id="documentationId">
        <textarea style="width:250px;" class="form-control" name="doc_comment" id="doc_comment">Selected for Re-Use in 2nd Trade Workflow.</textarea>
      </div>
      <div class="form-group">
        <input type="button" value="Close" class="btn btn-primary btn-xs" ng-click="$parent.isPopoverOpen = false">
        <input type="button" value="Comment" class="btn btn-primary btn-xs pull-right" ng-click="saveComment(this)">
      </div>
    </form>
    <br>
  </div>
</script>

Angular UI 弹出窗口关闭按钮不起作用

Angular UI Popover close button not working

popover

twitter-bootstrap

angularjs

angular-ui