Question

我有一个输入字段。在焦点上，工具提示会弹出一个动态添加的按钮。如何点击该按钮工作？

我一直在寻找解决方案，但没有任何明确的具体例子。

这是我的傻瓜：http://plnkr.co/edit/UFv6qcg68wD99HXf76xP?p=preview

以下是代码：

<body>

<div ng-controller="PopoverDemoCtrl">
    <h4>Dynamic</h4>

    <p>{{message}}</p>

    <br><button class="btn btn-warning" ng-click="removeMessage()">Remove mesage</button>

    <br><br>
    <input type="text" value="Click me!" uib-popover-html="htmlPopover" popover-trigger="focus" class="form-control">
    popover-trigger="focus" class="form-control">-->
</div>
</body>
</html>

控制器

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $sce) {

$scope.dynamicPopover = {
    content: 'Hello, World!',
    templateUrl: 'myPopoverTemplate.html',
    title: 'Title'
};

$scope.message = '';

$scope.showMessage = function(){
  console.log("Simple message");
  $scope.message = "Just added text";
}

$scope.removeMessage = function(){
  console.log("Simple message");
  $scope.message = "";
}

$scope.test = function(){
    console.log("test me click")
}

$scope.placement = {
    options: [
        'top',
        'top-left',
        'top-right',
        'bottom',
        'bottom-left',
        'bottom-right',
        'left',
        'left-top',
        'left-bottom',
        'right',
        'right-top',
        'right-bottom'
    ],
    selected: 'top'
};

$scope.htmlPopover = $sce.trustAsHtml('<button ng-mousedown="test()"><b style="color: red">Add message</b></button> to the <div class="label label-success">page</div> content');

}）;

Answer 1

使用uib-popover-template而不是uib-popover-html：

$scope.htmlPopover ='myPopoverTemplate.html';


<input type="text" value="Click me!" uib-popover-template="htmlPopover" popover-trigger="focus" class="form-control">
    <script type="text/ng-template" id="myPopoverTemplate.html">
      <div>
        <button ng-mousedown="test()"><b style="color: red">Add message</b></button>
        <div class="label label-success">page</div>
      </div>
    </script>

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

Answer 2

将uib-popover-html替换为uib-popover-template，并使用ng-click代替ng-mousedown，并暂停关闭popop

<input type="text" ng-model="value" value="{{value}}" uib-popover-template="htmlPopover" popover-trigger="focus" popover-popup-close-delay="1000" class="form-control">

<script type="text/ng-template" id="myPopoverTemplate.html">
  <div>
    <button ng-click="test()"><b style="color: red">Add message</b></button>
    <div class="label label-success">page</div>
  </div>
</script>

示例工作代码。 http://embed.plnkr.co/deN1VjHdXbTKXlqdQ0vt/

有关Uib https://angular-ui.github.io/bootstrap/#/popover

的更多信息

如何使ng-click处理动态添加按钮？

2 个答案: