天道酬勤,学无止境

angularjs-bootstrap

Inject variables via ng-init to controller

I want to inject the same variables with different values multiples times to the same controller. This is what I tried. What is a way to get different values in each call? HTML <body ng-app="myApp"> <div ng-controller="myCtrl" ng-init="test='helloworld';test1='helloworld2'"> </div> <div ng-controller="myCtrl" ng-init="test='helloworld3';test1='helloworld4'"> </div> <div ng-controller="myCtrl" ng-init="test='helloworld5';test1='helloworld6'"> </div> <body> JavaScript code var app = angular.module("myApp", []); app.controller("myCtrl", ["$scope",function($scope) { console.log($scope.test)

2021-11-23 06:20:58    分类:问答    javascript   angularjs   angularjs-bootstrap   angularjs-ng-init

IE10 中的 Angular UI Bootstrap 进度条(Angular UI Bootstrap progress bar in IE10)

问题 我正在使用 Angular UI Bootstrap 来显示进度条。 在 IE 中我的网站出现问题后,我在 Angular UI Bootstrap 网站上查看了 IE 并注意到以下内容: 进度条在 IE10 中不起作用当我使用开发者工具切换到 IE9 浏览器模式时,进度条有效 由于新版本打破进度条对我来说似乎很奇怪,我想我在这里问。 这个问题是已知的,还是我的一些奇怪的浏览器设置导致了这个问题? 是否有解决方法可以让进度条在 IE10 中工作? 编辑 该问题已在较新版本的 Angular UI Bootstrap 中得到修复。 回答1 这很简单,使用指令$watch变量的scope (在元素的属性中定义),当它更改时,您更改element属性中的值。 plnkr.co 代码示例 HTML: <div class="progress"> <div class="progress-bar" role="progressbar" progress-bar-watch="progress" progress-bar aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style=""></div> </div> JS app.controller('MainCtrl', function($scope) { $scope

2021-09-12 15:02:45    分类:技术分享    angularjs   internet-explorer-10   angularjs-bootstrap

Angular UI Bootstrap progress bar in IE10

I'm using Angular UI Bootstrap to display a progress bar. After having problems with my site in IE, I looked with IE at the Angular UI Bootstrap website and noticed the following: The progress bars DO NOT WORK in IE10 The progress bars WORK, when I switch to IE9 Browser Mode using the developer tools Since this seems very strange to me that the newer version breaks the progress bars, I thought I ask here. Is this problem known, or is some strange browser setting of mine causing this? Is there a workaround to get the progress bars work in IE10? EDIT The problem has been fixed in newer versions

2021-09-04 03:52:08    分类:问答    angularjs   internet-explorer-10   angularjs-bootstrap

可以在引导之前使用自定义 Angular 服务吗?(Possible to use a custom Angular service before bootstrap?)

问题 我有一个服务: angular.module('USC').service('TemplateService', function() {}); 在我手动引导我的 Angular 项目之前我想使用的: angular.bootstrap(document, ['USC']); 这可能吗? 我知道我可以调用 var service = angular.bootstrap().get(); 对于 Angular 提供的服务,但如何在模块初始化之前调用自定义服务? 回答1 如果可以使用与应用程序本身将使用的服务实例不同的服务实例,您可以像这样实现您想要的: angular.injector(['ng', 'yourApp']).get('SomeService').doStuff(); 另请参阅此简短演示。 如您所见,该服务已重新实例化(因此计数器从 0 开始)以在 Angular 应用程序中使用。

2021-08-31 02:05:51    分类:技术分享    angularjs   angularjs-service   angularjs-bootstrap

Possible to use a custom Angular service before bootstrap?

I have a service: angular.module('USC').service('TemplateService', function() {}); That I would like to use before I manually bootstrap my Angular project: angular.bootstrap(document, ['USC']); Is this possible? I know I can call var service = angular.bootstrap().get(); for Angular provided services, but how would I call a custom one before the module was initialized?

2021-06-03 07:41:56    分类:问答    angularjs   angularjs-service   angularjs-bootstrap

AngularJS引导程序选项卡选项卡标题(Angularjs bootstrap tabset tab heading)

问题 我想知道是否有可能在angularjs引导程序选项卡选项卡标题内编写html。 我正在尝试在标题内添加svg。 我在plunker中创建了一个简短的代码段,以尝试演示我遇到的问题。 <tabset> <tab heading="<span>hello</span><em>1</em>">One</tab> <tab heading="Two">Two</tab> <tab heading="Three">Three</tab> </tabset> http://plnkr.co/edit/qFsFGDNUIJj9nIF51ApU 有任何想法吗? 谢谢 回答1 Angular Bootstrap v0.14 + Angular Bootstrap v0.14为大多数以前提供的控件引入了新的前缀。 以下原始答案仍然适用,但是您必须使用新的标签名称uib-tabset , uib-tab和uib-tab-heading 。 <uib-tabset> <uib-tab> <uib-tab-heading> <span>hello</span><em>1</em> </uib-tab-heading> One </uib-tab> <uib-tab heading="Two">Two</uib-tab> <uib-tab heading="Three">Three</uib-tab>

2021-05-31 19:34:14    分类:技术分享    angularjs   angular-ui-bootstrap   angularjs-bootstrap

AngularJS多级下拉菜单,用于从递归指令生成的菜单结构(AngularJS multilevel dropdown menu for a menu structure generated from a recursive directive)

问题 我在这里有一个泡菜。 我必须从网络服务呼叫中获取多级导航菜单。 由于导航菜单中可以包含无限多个子菜单,因此我不得不使用递归指令来构建父/子导航结构。 现在,我试图弄清楚如何将其转变为功能性的菜单结构。 我正在看angularui-bootstrap,它们有一个Dropdown Toggle,它具有一些基本的dropmenu功能,但是由于我使用了递归指令,所以我的菜单结构已经有angularjs生成的css类连接到它们了。 angularjs-bootstrap dropmenu的css类与我的angularjs生成的类...不同! <ul> <li ng-repeat="parent in parents" class="ng-scope"> <recursive-list-item on-node-click="onNodeClickFn(node)" parent="parent" class="ng-isolate-scope ng-scope"> <a data-ng-click="onNodeClick({node: parent})" href="javascript:void(0)" class="ng-scope ng-binding">Clothes</a> <!-- ngIf: parent.children.length > 0 --> <ul data

2021-04-29 08:54:05    分类:技术分享    javascript   angularjs   angularjs-directive   angularjs-bootstrap

Bootstrap-UI Typeahead在结果列表中显示多个属性?(Bootstrap-UI Typeahead display more than one property in results list?)

问题 我正在使用ui-bootstrap typeahead。 效果很棒! 但是,我想知道是否有可能在结果列表中显示多个属性甚至HTML。 典型问题:搜索返回多个具有相同值的对象。 例如搜索“令人惊叹的宽限期”返回[“令人惊叹的宽限期”,“令人惊叹的宽限期”],其中一个是电影,一个是歌曲。 我希望结果列表更像: amazing grace | movie amazing grace | song ...,以便用户确切知道他们在选择什么。 更好的是标题旁边的图标。 换句话说,列表中的每个结果都包含一些HTML。 这些都可以开箱即用吗? 回答1 该事有关ntice typeahead从http://angular-ui.github.io/bootstrap/指令是试图从AngularJS选择指令中使用模拟语法。 这意味着用于选择要绑定的模型和标签的所有表达式都是AngularJS表达式。 反过来,这意味着您可以使用任何AngularJS表达式来计算标签的文本。 例如,要显示所需的文本,您可以编写: typeahead="item as item.title + ' (' + item.type + ')' for item in titles | filter:{title:$viewValue}" 前提是您的数据模型如下所示: $scope.titles = [ {title:

2021-04-28 01:49:56    分类:技术分享    angularjs   bootstrap-typeahead   angularjs-bootstrap

AngularJS multilevel dropdown menu for a menu structure generated from a recursive directive

I have a dilly of a pickle here. I have to get my multi-level navigation menu from a webservice call. Since my navigation menu can have an infinite amount of submenu's in it, I had to use a recursive directive to build my parent/child navigation structure. Now I am trying to figure out how to turn it into a functional dropmenu structure. I was taking a look at angularui-bootstrap, and they have a Dropdown Toggle, which has some basic dropmenu functionality, but since I used a recursive directive my menu structure already has angularjs generated css classes attached to them. The angularjs

2021-04-10 00:58:45    分类:问答    javascript   angularjs   angularjs-directive   angularjs-bootstrap

如何使用HTML内容创建AngularJS UI引导程序弹出窗口?(How do I create an AngularJS UI bootstrap popover with HTML content?)

问题 我想创建一个带有预标记的引导弹出窗口,该预标记包含已预定义的JSON对象。 天真的实现, <span popover='<pre>{[ some_obj | json:" " ]}</pre>' popover-trigger='mouseenter'> 在将内容插入弹出窗口之前先对其进行转义。 用HTML内容指定弹出框的最佳方法是什么? 回答1 更新: 从中可以看出,您现在应该能够执行此操作而不必覆盖默认模板。 原来的: 从1.2版开始, ng-bind-html-unsafe已被删除。 您应该使用$ sce服务参考。 这是用于创建可信HTML的过滤器。 MyApp.filter('unsafe', ['$sce', function ($sce) { return function (val) { return $sce.trustAsHtml(val); }; }]); 这是使用此过滤器的覆盖的Angular Bootstrap 0.11.2模板 // update popover template for binding unsafe html angular.module("template/popover/popover.html", []).run(["$templateCache", function ($templateCache) {

2021-04-06 19:40:14    分类:技术分享    angularjs   angular-ui   angular-ui-bootstrap   angularjs-bootstrap