标签: angular-bootstrap

How To Update Page After Calling $http.put service in Directive Using AngularJS/Web API/Angular-ui-router

We are new to AngularJS but are working on an AngularJS/Web API application that updates a data model from an AngularJS Bootstrap popover/directive.

We've successfully updated the database from the directive/popover, however are having trouble figuring out how to refresh the data on the page with the updated data without reloading the page.

Main Page CSHTML:

<div ng-app="FFPA" ng-controller="myCtrl">
   <div svg-floorplan="dataset"></div>
</div>

Run Code Online (Sandbox Code Playgroud)

Popover HTML:

<div>
   <div>
      ID: {{ person.Id }}<br />
      Name: {{ person.fullName }}<br />
      Current Cube/Office: {{ …

Run Code Online (Sandbox Code Playgroud)

asp.net-web-api angularjs angularjs-directive angularjs-scope angular-bootstrap

jaz*_*Box

2017 08-03

8
推荐指数

1
解决办法

1035
查看次数

Angular bootstrap typeahead不能与Angular 1.3.0一起使用

我创建了一个小的plunker来表明这不起作用.谁能帮助我如何使用1.3.0 angularJS /提供备用解决方案的typeahead.我们正在使用angular-bootstrap 0.11.0和最新版本的bootstrap.我们的代码严重依赖于1.3.0中引入的ng-messages

这是plunker链接

您可以清楚地看到,点击事件,向上箭头和向下箭头不起作用.添加一些代码以使SO快乐.:)

 <div class="container-fluid" ng-controller="TypeaheadCtrl">
      <h4>Static arrays</h4>
      <pre>Model: {{selected | json}}</pre>
      <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control" />

    </div>

Run Code Online (Sandbox Code Playgroud)

angularjs angular-bootstrap

Pra*_*evu

lucky-day

7
推荐指数

1
解决办法

6346
查看次数

由函数外部数组定义的指令引起的Angular itkn错误

我正在使用Angular 1.3.15,也尝试过1.2.28,以及角度引导程序.昨晚,在将Chrome更新为v42.0.2311.90之后,我突然开始看到大量的角度itkn错误:

Error: [$injector:itkn] Incorrect injection token! Expected service name as string, got function ()
http://errors.angularjs.org/1.3.15/$injector/itkn?p0=function%20()
    at REGEX_STRING_REGEXP (angular.min.js?bust=undefined:63)
    at Object.invoke (angular.min.js?bust=undefined:4189)
    at angular.min.js?bust=undefined:6525
    at forEach (angular.min.js?bust=undefined:323)
    at Object.<anonymous> (angular.min.js?bust=undefined:6523)
    at Object.invoke (angular.min.js?bust=undefined:4204)
    at Object.enforcedReturnValue [as $get] (angular.min.js?bust=undefined:4056)
    at Object.invoke (angular.min.js?bust=undefined:4204)
    at angular.min.js?bust=undefined:4021
    at Object.getService [as get] (angular.min.js?bust=undefined:4162)

Run Code Online (Sandbox Code Playgroud)

这在更新Chrome之前没有发生,但我想我不能说这肯定是相关的.

经过深思熟虑后,我发现任何定义的指令都是这样的:

  .directive('modalTransclude', function () {
    return {
      // directive code
    };
  })

Run Code Online (Sandbox Code Playgroud)

会导致此itkn错误.我在控制台key中记录了$inject迭代器中的角度,它返回了指令本身的功能,而不仅仅是明确意图的字符串.

我发现将函数包装在一个数组中,即使没有定义注入的任何字符串,它也解决了这个问题:

  .directive('modalTransclude', [function () {
    return {
      // directive code
    };
  }]) …

Run Code Online (Sandbox Code Playgroud)

angularjs angular-bootstrap

hel*_*on3

lucky-day

7
推荐指数

1
解决办法

1622
查看次数

如何创建工具提示？

我想为工具提示创建一个自定义 CSS 类，它将包含长度超过 25-30 的字符串。通常这么长的文本不适合工具提示文本区域。

无论如何，是否可以使用Tooltip (ui.bootstrap.tooltip)来执行此操作？就像使用自定义 CSS 类来获得所需的输出一样。

这是简单的 css 工具提示 - Plunker DEMO

这是相同的代码片段：

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
   
    max-width:100px;
    padding:15px;
    min-height:30px;
    background:#fff;
    visibility: hidden;
    border: 1px solid black;
    color: #000;
    text-align: center;
    border-radius: 6px;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

Run Code Online (Sandbox Code Playgroud)

<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me 1
  <span class="tooltiptext">Tooltip …

Run Code Online (Sandbox Code Playgroud)

html css tooltip angular-bootstrap

Poo*_*dar

2017 02-23

7
推荐指数

1
解决办法

1万
查看次数

什么是 npm i bootstrap@next？

当我在 angularjs 2 中配置 bootstrap 时，我在此链接中遇到了以下步骤，

如何将 bootstrap 添加到 angular-cli 项目

npm i bootstrap@next

Run Code Online (Sandbox Code Playgroud)

我明白如果我们运行以下命令，

npm i -S bootstrap@4.0.0-alpha.4

Run Code Online (Sandbox Code Playgroud)

然后这将安装 bootstrap alpha 版本。但是如果我们给出@next，将安装哪个版本？

还有 --save 和 @next 之类的，

npm i bootstrap@next --save

Run Code Online (Sandbox Code Playgroud)

推荐哪个？以及我们如何确认已安装版本的版本？

angular-bootstrap angular-cli ng-bootstrap

Nav*_*een

2017 05-23

7
推荐指数

1
解决办法

8943
查看次数

Angular UI多级下拉切换

我正在尝试使用Angular UI Dropdown Toggle来创建多级/嵌套下拉菜单.

当我点击下拉列表的第一级时,它只是完全关闭而不会显示第二层.

我附上了一个非常基本的plunkr来展示我正在努力实现的基本版本.

http://plnkr.co/edit/c0GbKQoYWICXwd3JRWGV?p=info

任何帮助,非常感谢.

谢谢

toggle angularjs drop-down-menu angular-ui angular-bootstrap

dav*_*rve

lucky-day

6
推荐指数

2
解决办法

3万
查看次数

angular-ui-bootstrap datepicker和masked input

我正在采取Angular的第一步,并希望我在正确的位置找到我的问题/问题的答案.如果没有,请指出我正确的方向.

我正在使用角度UI引导弹出日期选择器,如下例所示:http: //angular-ui.github.io/bootstrap/#/datepicker

当我将其与uiMask指令(http://angular-ui.github.io/ui-utils/)结合使用时,当我选择日期时,输入中的值会被加扰.

我怀疑是因为角度模型的类型不同:datepicker想要JS Date对象/ ui.mask想要(蒙面)字符串.

当选择的日期被uiMask格式化/解析时,它会出错: - /

我想做什么甚至可能？

亲切的问候,汤姆.

angularjs angular-ui angular-ui-bootstrap angular-bootstrap

Tom*_*Tom

lucky-day

6
推荐指数

1
解决办法

5136
查看次数

具有异步加载的Angular bootstrap typeahead是后面的一个字符

我在一个指令中实现了以下类型的代码.

这是HTML:

<div>
    <input type="text"
           ng-model="company"
           uib-typeahead="company as company.name for company in companyByName($viewValue)"
           typeahead-loading="loadingCompanies"
           typeahead-no-results="noCompanyResults"
           class="form-control">
    <i ng-show="loadingCompanies" class="glyphicon glyphicon-refresh"></i>
    <div ng-show="noCompanyResults">
        <i class="glyphicon glyphicon-remove"></i> No Results Found
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

这是JavaScript:

  scope.companyByName = function() {
    var companyName = scope.company.name ? scope.company.name : scope.company;
    var searchTerms = {name: companyName, startRow: 0, endRow: 20};

    return $http.post("backend/get/companies.php", searchTerms).then((result) => {
      $log.info("Companies", result.data.results);
      return result.data.results;
    });
  };

Run Code Online (Sandbox Code Playgroud)

PHP代码backend/get/companies.php接受一个搜索字符串并返回与对象的数组id和name与包含该搜索字符串名称属性.

以下是我遇到的行为:

当我在typeahead字段中键入单个字符"f"时,companyName传递给后端脚本的值为""(空字符串).backend/get/companies.php返回所有结果.

当我在typeahead字段中键入第二个字符"fo"时,companyName传递给后端脚本的值为"f". backend/get/companies.php …

javascript php angularjs angular-ui-typeahead angular-bootstrap

jkn*_*rkn

lucky-day

6
推荐指数

1
解决办法

2563
查看次数

Angular Bootstrap：如何关闭模态

我正在使用 angular 4、firebase 和 angular bootstrap。我打开模态，这是一个用户表单，想法是在用户使用其中一种登录方法（google auth、facebook auth 或电子邮件和密码身份验证）登录后立即关闭模态。但是我找不到在需要时关闭模态的方法。

谷歌认证

    export class NavComponent implements OnInit {

          @ViewChild('close') public modal: ElementRef;

          constructor() {}


          public openModal(content) {
            this.modalService.open(content).result.then((result) => {
              this.closeResult = `Closed with: ${result}`;
            }, (reason) => {
              this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
            });
          }    
          private getDismissReason(reason: any): string {
            if (reason === ModalDismissReasons.ESC) {
              return 'by pressing ESC';
            } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
              return 'by clicking on a backdrop';
            } else {
              return `with: ${reason}`;
            }
          }
         public googleLogin(content): …

Run Code Online (Sandbox Code Playgroud)

javascript bootstrap-modal angular-bootstrap angular

Mig*_*ias

2017 12-09

6
推荐指数

3
解决办法

3万
查看次数

为什么 Angular Bootstrap Modal 的 jasmine 测试失败？

我对 Angular 很陌生，所以这可能是一个愚蠢的问题，但我在 stackoverflow 上找不到如何解决我的问题（也许是因为我的知识水平），所以让我发布这个问题，如果有人的话我将非常感激可以帮我解决。

我正在使用 Angular Bootstrap Modal ( https://ng-bootstrap.github.io/#/components/modal/examples )，但仅在测试时出现错误消息；

错误：找不到notifyModalContent的组件工厂。你添加到了吗@NgModule.entryComponents？

（弹出对话框，ng服务没有问题）

我检查了app.module.ts包含declarations: myModalContent, imports: NgbModule(or NgbModule.forRoot()), entryComponents: [notifyModalContent]。另外我{ provide: NgbActiveModal, useClass: NgbActiveModal }在 overrideComponent 中添加了product.component.spec.ts但仍然不起作用。

应用程序模块.ts

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { ProductComponent } from './product/product.component';
import { myModalContent } from './my-dialog/my-dialog.component';

@NgModule({
  declarations: [
    ProductComponent,
    myModalContent,
  ],
  imports: [
    NgbModule,
  ],
  entryComponents: [myModalContent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { …

Run Code Online (Sandbox Code Playgroud)

javascript typescript angular-bootstrap angular

use*_*100

2019 06-11

6
推荐指数

1
解决办法

3090
查看次数