angularjs - How to dynamically change template of popover in angular-strap -
i using angularstrap create popover using template. using attribute ng-attr-data-template provide link template. changing mentioned attribute value using function called on click of button. change not being reflected popover. please suggest possible solution problem.
here link plunkr code follows
index.html
<!doctype html> <html ng-app="klk"> <head> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script> <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.0.4"></script> <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.0.4"></script> <link rel="stylesheet" href="style.css" /> <script src="app.js"></script> </head> <body ng-controller="mainctrl"> <hr/> <button type="button" class="btn btn-info" placement="right" data-animation="am-flip-x" ng-attr-data-template="{{link}}" data-auto-close="1" bs-popover > {{link}} </button> <hr/> <button class="btn btn-info" ng-click = "changecontent()">change link</button> </body> </html> app.js
var app = angular.module('klk', ['mgcrea.ngstrap']); app.controller('mainctrl', function($scope, $popover){ $scope.trackname = 'click on button , give name'; $scope.popov = function(el){ $popover(angular.element(el), { show: true, placement: 'right', template: 'link1.html', animation: 'am-flip-x' }); }; $scope.link = "link1.html"; $scope.change = true; $scope.changecontent = function(){ $scope.change = !$scope.change; if ($scope.change) $scope.link = "link1.html"; else $scope.link = "link2.html"; } }); link1.html
<div class="popover"> <div class="arrow"></div> <h3 class="popover-title"><strong>heading 1</strong></h3> <div class="popover-content"> pop content 1 </div> </div> link2.html
<div class="popover" > <div class="arrow"></div> <h3 class="popover-title"><strong>heading 2</strong></h3> <div class="popover-content"> pop content 2 </div> </div>
if interested in changing content of template dynamically, can accomplished using following way. here example of modified index.html. notice there data-content , data-title bound model properties.
<!doctype html> <html ng-app="klk"> <head> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script> <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.0.4"></script> <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.0.4"></script> <link rel="stylesheet" href="style.css" /> <script src="app.js"></script> </head> <body ng-controller="mainctrl"> <hr/> <button type="button" class="btn btn-info" placement="right" data-animation="am-flip-x" data-title = "{{popover.title}}" data-content="{{popover.content}}" data-template="link3.html" data-auto-close="1" bs-popover >click me</button> <hr/> <button class="btn btn-info" ng-click = "changecontent()">change link</button> </body> </html> here module , controller, in controller have model called popover properties title , content, dynamic. example, if called function changecontent toggle content , make content in popover change. // code goes here var app = angular.module('klk', ['mgcrea.ngstrap']);
app.controller('mainctrl', function($scope, $popover){ $scope.trackname = 'click on button , give name'; $scope.togglecontent=true; $scope.popover = { "title": "original content", "content": "loading...", }; $scope.changecontent=function(){ if($scope.togglecontent){ $scope.popover = { "title": "changed", "content": "<p>hello content has changed!</p>", }; }else{ // show original content $scope.popover = { "title": "original content", "content": "hello content 1...", }; } } }); here template have content , title dynamic bound model properties title , content. ng-bind-html
<div class="popover" tabindex="-1" ng-show="content"> <div class="arrow"></div> <div class="popover-title" ng-bind-html="title"></div> <div class="popover-content"> <form name="popoverform"> <div class="form-actions"> <!--<button class="btn-sm pull-right close-popover" ng-click="$hide()">x</button>--> </div> <p ng-bind-html="content" style="min-width:300px;"></p> </form> </div> </div> a working example of can found here http://plnkr.co/edit/fpqwcdcpnvi3zizk6ut1?p=preview
Comments
Post a Comment