2016-06-01 19 views
0

私は入力フィールドを持っています。フォーカスすると、動的に追加されたボタン付きのツールチップポップアップが表示されます。そのボタンをクリックしてng-clickする方法は?動的に追加されたボタンでng-clickを操作する方法は?

私は解決策を探していましたが、明確な具体例はありません。ここ

http://plnkr.co/edit/UFv6qcg68wD99HXf76xP?p=previewコードである:ここで

私plunkrある

<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'); 

})。

答えて

0

UIB-ポップオーバー-HTML置き換えるためにUIB-ポップオーバー・テンプレートおよび使用ngのクリックの代わりに、NGポップアップを閉じるまで少し遅れを取る

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

サンプルコード。 UIB https://angular-ui.github.io/bootstrap/#/popover

に関する http://embed.plnkr.co/deN1VjHdXbTKXlqdQ0vt/

詳細情報

0

利用代わりにUIB-ポップオーバー-HTMLのUIB-ポップオーバー-テンプレート:

$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

関連する問題