how to add fields in popover using angularjs?
Question
This is my code for popover using angular js and I want to know that how we can add our styling in custom-popover popover-HTML as I am not able to bind any element in the HTML part
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> </head> <body> <div ng-app="customDirectives"> <div> <span custom-popover popover-html="Some Popover Text" popover-placement="bottom" popover-label="label"></span> </div> </div> <script> customDirectives = angular.module('customDirectives', []); customDirectives.directive('customPopover', function () { return { restrict: 'A', template: '<span>{{label}}</span>', link: function (scope, el, attrs) { scope.label = attrs.popoverLabel; $(el).popover({ trigger: 'click', html: true, content: attrs.popoverHtml, placement: attrs.popoverPlacement }); } }; }); angular.module('CustomComponents', ['customDirectives']); </script> </body> </html>
1 answers
solution1
0 ACCPTED 2015-05-29 08:54:51
Check this example (added popover-some-var to Your code) :
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> </head> <body> <div ng-app="customDirectives"> <div> <span custom-popover popover-html="Some Popover Text" popover-placement="bottom" popover-label="label" popover-some-var="BLABLABLA"></span> </div> </div> <script> customDirectives = angular.module('customDirectives', []); customDirectives.directive('customPopover', function () { return { restrict: 'A', template: '<span>{{label}}</span>', link: function (scope, el, attrs) { scope.label = attrs.popoverLabel; var someVar = attrs.popoverSomeVar; // HERE IS VARIABLE $(el).popover({ trigger: 'click', html: true, content: attrs.popoverHtml + " " + someVar, placement: attrs.popoverPlacement }); } }; }); angular.module('CustomComponents', ['customDirectives']); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to add additional form fields using angularjs?
Angularjs validation using popover
How to add dynamic input fields and corresponding radio using AngularJS
Add fields in DevExpress Pivot using AngularJS
Angularjs add validation to dynamic fields using $compile
How to add content via ajax using the popover boostrap
How to edit input fields using Angularjs?
How to add a class to a popover title
How add img to popover bootstrap
How to add a popover link on tumblr
Related Tags