小编pko*_*rce的帖子

在$ routeProvider解析中返回相互依赖的异步promise

考虑一下代码:

var myApp = angular.module('myApp', []);
Run Code Online (Sandbox Code Playgroud)

路线:

myApp.config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: 'app.html', 
            controller:myAppController, 
            resolve:{
                resolveData:function(Resolver){
                    return Resolver();
                }
            }
        });
    });
Run Code Online (Sandbox Code Playgroud)

解决:

myApp.factory('Resolver', ['$http', function($http){
    return function(){
        return $http({url: '/someurl',method: "GET"}).then(function(data) {

            // dependent call 1
            $http({url: '/someotherurl',method: "GET" }).then(function(data) {

            });

            // dependent call 2
            $http({url: '/someanotherurl',method: "GET" }).then(function(data) {

            });
        });
    }
}]);
Run Code Online (Sandbox Code Playgroud)

上面我在一个内嵌了2个调用,因为它们依赖于父调用返回的数据.

我想做什么:当所有这些都完成后返回解析器,而不仅仅是父调用.

我不能使用$ q.all(),因为其中2个调用依赖于第一个调用.

简而言之,只有在所有3个调用完成后才能加载myAppController.

promise angularjs angularjs-routing

8
推荐指数
1
解决办法
4310
查看次数

如何将$ scope对象注入对话框模板?

我有这个plunker与一个对话框示例,该示例使用选项对象的resolve属性,基于此示例.
基本上我想要做的是传递要在对话框模板中使用的title变量:

var title         = "azerty";
Run Code Online (Sandbox Code Playgroud)

使用对话框选项对象的resolve属性:

resolve:       {title: angular.copy(title)}
Run Code Online (Sandbox Code Playgroud)

然后将其注入对话框控制器并将其分配给$ scope变量:

controllers.DialogController = function($scope, dialog, title) {
    $scope.title = title;
Run Code Online (Sandbox Code Playgroud)

但我得到这个错误:

错误:未知提供者:azertyProvider < - azerty

javascript modal-dialog angularjs angular-ui angular-ui-bootstrap

6
推荐指数
1
解决办法
3792
查看次数

netbeans中的元素上不允许使用属性“ ng-click”

我只是喜欢AngularJs。我所有的项目都用netbeans编写,我想坚持使用netbeans。我在网上搜索了一个支持netbeans中的AngularJs的插件,但是没有运气。

有一个插件,但似乎无法正常工作,或者我无法使其正常工作。

我不是在寻找完整的插件,如果我能摆脱编辑器中的警告,我会感到满意的。

我的问题:

  1. 有谁知道支持AngularJs的适用于Netbeans的插件?
  2. 如果不是,则指向如何使netbeans理解自定义属性的说明的链接也将帮助/

netbeans angularjs

5
推荐指数
1
解决办法
2737
查看次数

NgbTooltip 在 Angular 应用程序中的位置

在我的Angular2/4 应用程序中,我使用ng-bootstrap及其组件NgbTooltip

假设以下HTML代码片段

<div class="col-sm-8 text-ellipsis" 
     ngbTooltip="'A very long text that does not fit'" 
     placement="top" 
     container="body">
    A very long text that does not fit
</div>
Run Code Online (Sandbox Code Playgroud)

与给定的习惯CSS

.text-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
Run Code Online (Sandbox Code Playgroud)

我对我的实现还不满意,也许有人可以帮助我找到一个优雅的解决方案来解决我的问题:

假设文本不适合div,那么它将被截断并按预期附加“...”,并且工具提示显示在 的中心顶部div。这对于这种情况很好,但是当内容很短时,它看起来很难看:

<div class="col-sm-8 text-ellipsis" 
     ngbTooltip="'1.jpg'" 
     placement="top" 
     container="body">
    1.jpg
</div>
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

现在工具提示仍然显示在 div 的顶部中心,但位于文本的右侧(因为它很短但div仍然是全宽)。

我认为我可以通过使用一个span元素轻松解决这个问题,并在其上设置工具提示而不是div

<div class="col-sm-8 text-ellipsis">
    <span  
     ngbTooltip="'A very long text that does not …
Run Code Online (Sandbox Code Playgroud)

html css ng-bootstrap angular4 angular

5
推荐指数
1
解决办法
2万
查看次数

Ng-Bootstrap Datepicker,如何在 Angular4 中突出显示特定日期

我有一系列任务,每个任务都包含一个日期。我想突出显示日期选择器中的匹配日期,但似乎无法在文档中找到如何完成它。有人能帮忙吗?

https://ng-bootstrap.github.io/#/components/datepicker/api

这是我的打字稿:

import { Component, OnInit } from '@angular/core';
import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';

const now = new Date();

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  constructor() { 
  }

  ngOnInit() {
  }

  model: NgbDateStruct;
  date: {year: number, month: number};

  selectToday() {
    this.model = {year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate()};
  } 
}
Run Code Online (Sandbox Code Playgroud)

和 HTML:

<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>
Run Code Online (Sandbox Code Playgroud)

datepicker bootstrap-4 ng-bootstrap angular

4
推荐指数
1
解决办法
6772
查看次数

Angular NgbTypeahead

我正在使用来自Angular Bootstrap的typeahead - https://ng-bootstrap.github.io/#/components/typeahead/examples

一切正常,但我希望在一个文本框上有多个值.由于该字段是来自组,一旦选择了一个值,它就可以允许下一个,而不删除前一个.

angular-ui-typeahead angular-bootstrap ng-bootstrap angular

4
推荐指数
1
解决办法
6659
查看次数

angularjs bootstrap datepicker

我正在使用带角度js的bootstrap datepicker ...

https://gist.github.com/rsvalerio/5606688

https://gist.github.com/danbarua/5356062

根据它..如果我需要传递选项到datepicker它应该是:

<input type="text" b-datepicker="{format: 'dd-mm-yyyy'}" ng-model="dateObject" >
Run Code Online (Sandbox Code Playgroud)

但这不起作用.我无法修复代码,请帮忙

datepicker angularjs

3
推荐指数
2
解决办法
4万
查看次数

使用Jasmine和karma运行Angular2的"npm test"时出现404错误

嗨,我正在编写一个测试用例,在我的应用程序中我正在使用"@ ng-bootstrap/ng-bootstrap /"下面是我的system.config.ts

(function (global) {
  System.config({

    paths: {
      // paths serve as alias
      'npm:': 'base/node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',

      '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
      '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
      '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
      '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
      '@angular/platform-browser/testing':
      'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
      '@angular/platform-browser-dynamic/testing':
      'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
      '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',

      // other libraries
      'rxjs': 'npm:rxjs', …
Run Code Online (Sandbox Code Playgroud)

jasmine typescript karma-runner ng-bootstrap angular

3
推荐指数
1
解决办法
1213
查看次数

如何使用角度4中的ng-bootstrap将数据模态组件传递给父组件

我尝试下面编码从模态组件到父组件的传递数据.

的package.json

"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.3"
Run Code Online (Sandbox Code Playgroud)

app.component.html

<button class="btn btn-primary" (click)="openModal()">Open</button>
Run Code Online (Sandbox Code Playgroud)

app.component.ts

import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

export class AppComponent {

   constructor(private modalService: NgbModal) { }

    openModal() {
        const modalRef = this.modalService.open(AppModalComponent);
    }
}
Run Code Online (Sandbox Code Playgroud)

APP-modal.component.html

<h1>{{data}}</h1>
<button class="btn btn-primary" (click)="addMe()"></button>
Run Code Online (Sandbox Code Playgroud)

APP-modal.component.ts

import { Component, Output, EventEmitter } from '@angular/core';

export class AppModalComponent {
    private data: string;
    @Output emitService = new EventEmitter();

    constructor() {
        this.data = "hello world";
    }

    addMe() {
        this.emitService.next(this.data)
    }
}
Run Code Online (Sandbox Code Playgroud)

发出后,如何在父组件(app.component)中获取数据?

ng-bootstrap angular

3
推荐指数
1
解决办法
3535
查看次数

EXCEPTION:./NgbTabset类中的错误NgbTabset - 内联模板:12:20引起:无法读取未定义的属性'templateRef'

我使用ng-bootstrap替代angular2中的ui-bootstrap.

我的html如下:

<div class="row" style="height: 100%;">
  <div class="col-12">
    <div class="container" id="contentMain">
      <div class="card-my-profile">
        <div class="card-image">
          <div class="image-wrap">
            <div class="image-placholder" data-firstletter="S"></div>
          </div>
        </div>
        <div class="clearfix card-fluid">
          <div class="">
            <h4 class="title-card">Priya</h4>
            <div><span class="item-type">Title:</span> Job title</div>
            <div><span class="item-type">Location:</span> Bangalore</div>
          </div>
          <div class="">
            <div><span class="item-type">Contact:</span> 9876543210</div>
            <div><span class="item-type">Email:</span> priya@gmail.com</div>
            <div><span class="item-type">Experience:</span> 9 years</div>
          </div>
        </div>
        <div class="card-buttons">
          <a href class="btn btn-success btn-rounded text-uppercase">Resume <i class="bi_interface-tick small"></i> </a>
          <div class="text-right">
            <a class="inherit small" href>Update?</a>
          </div>
          <a [hidden]="!isNotUploaded" href class="btn btn-default btn-rounded text-uppercase">Upload CV</a>
          <ul class="list-inline …
Run Code Online (Sandbox Code Playgroud)

angular-ui-bootstrap angular-ui-bootstrap-tab ng-bootstrap angular

1
推荐指数
1
解决办法
3604
查看次数