如何使用angularjs在popover中添加字段？
[英]how to add fields in popover using angularjs?
问题描述
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 
这是我使用angular js进行popover的代码，我想知道我们如何在custom-popover popover-HTML中添加样式，因为我无法绑定HTML部分中的任何元素
<!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 个解决方案
解决方案1
0 已采纳 2015-05-29 08:54:51
Check this example (added popover-some-var to Your code) : 检查以下示例（将popover-some-var添加到您的代码中）：
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使用angularjs添加其他表单字段？ - How to add additional form fields using angularjs?
使用弹出框进行AngularJS验证 - Angularjs validation using popover
如何使用AngularJS添加动态输入字段和相应的单选 - How to add dynamic input fields and corresponding radio using AngularJS
使用AngularJS在DevExpress Pivot中添加字段 - Add fields in DevExpress Pivot using AngularJS
AngularJS使用$ compile向动态字段添加验证 - Angularjs add validation to dynamic fields using $compile
如何使用Popover Boostrap通过Ajax添加内容 - How to add content via ajax using the popover boostrap
如何使用Angularjs编辑输入字段？ - How to edit input fields using Angularjs?
如何在弹出式标题中添加类 - How to add a class to a popover title
如何将img添加到popover引导程序 - How add img to popover bootstrap
如何在 tumblr 上添加弹出链接 - How to add a popover link on tumblr
相关标签