小编ghi*_*ing的帖子

Angular Bootstrap - 选择要刷新的计时问题

我喜欢Bootstrap-Select并且我目前正在通过另一个用户的指令帮助joaoneto/angular-bootstrap-select它并且它按预期工作,除非我尝试<select>使用$http或在我的情况下用dataService包装器填充我的元素.我似乎得到了一些计时问题,数据在selectpicker显示/刷新后出现,然后我最终得到一个空的Bootstrap-Select列表..虽然使用Firebug,我确实看到了现在隐藏的值列表<select>.如果我然后进入控制台并手动执行$('.selectpicker').selectpicker('refresh')它然后工作.
我通过做一个补丁并添加一个.selectpicker('refresh')内部暂时工作$timeout但是你知道它并不理想,因为我们jQuery直接在ngController中使用...哎哟!

因此,我认为该指令可能缺少观察者,或者至少触发ngModel了更改或更新的内容.

Html示例代码:

<div class="col-sm-5">
    <select name="language" class="form-control show-tick" 
        ng-model="vm.profile.language" 
        selectpicker data-live-search="true"
        ng-options="language.value as language.name for language in vm.languages">
    </select>
    <!-- also tried with an ng-repeat, which has the same effect -->
</div>
Run Code Online (Sandbox Code Playgroud)

然后在我的Angular Controller中:

// get list of languages from DB
dataService
    .getLanguages()
    .then(function(data) {  
        vm.languages = data;

        // need a timeout patch to …
Run Code Online (Sandbox Code Playgroud)

angularjs angularjs-directive angularjs-ng-repeat bootstrap-select

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

如何在Aurelia中访问Window&Document对象?

在/ framework中访问DocumentWindow对象的最佳方法是什么?我确实尝试直接在我的Aurelia代码中访问它似乎确实有效,但这是正确的方式还是有Aurelia/ES6这样做的方式?ES6Aureliawindow

具体来说,我想访问window.localStoragewindow.sessionStorage等属性.我刚刚开始使用Aurelia和ES6,所以虽然我想遵循这些标准,但我对如何做到这一点还是一个小小的菜鸟.

类似于以下内容:

constructor() {
    this.user = JSON.parse(window.sessionStorage.user || window.localStorage.user);
}
Run Code Online (Sandbox Code Playgroud)

该代码实际上在Aurelia中有效,但以这种方式编写是否正确?

javascript ecmascript-6 aurelia

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

如何在没有 `strictTemplates` 的情况下使用自定义事件(不是事件发射器)来抱怨 `$event` 不是自定义事件类型?

我创建了一个名为Angular-Slickgrid的 Angular 库,它是SlickGrid的包装器,它是一个旧的 JavaScript/jQuery 库,我可以使用 SlickGrid 发送的任何自定义事件而没有任何问题,如下所示(此时一切都很好)

<angular-slickgrid gridId="grid28"
    [columnDefinitions]="columnDefinitions"
    [gridOptions]="gridOptions"
    [dataset]="dataset"                    
    (onSelectedRowsChanged)="handleOnSelectedRowsChanged($event.detail.eventData, $event.detail.args)">
</angular-slickgrid>
Run Code Online (Sandbox Code Playgroud)

一切都很好,一切正常

handleOnSelectedRowsChanged(event: any, args: OnSelectedRowsChangedEventArgs) {
    console.log(args);
}
Run Code Online (Sandbox Code Playgroud)

在我的库中,我只是用一个具有以下代码的小函数来调度这些事件

/** Dispatch of Custom Event, which by default will bubble & is cancelable */
dispatchCustomEvent(eventName: string, data?: any, isBubbling: boolean = true, isCancelable: boolean = true) {
  const eventInit: CustomEventInit = { bubbles: isBubbling, cancelable: isCancelable };
  if (data) {
    eventInit.detail = data;
  }
  return this.elm.nativeElement.dispatchEvent(new CustomEvent(eventName, eventInit));
}
Run Code Online (Sandbox Code Playgroud)

一切都是美好的,生活是美好的……

启用时它会中断 strictTemplates …

javascript typescript angular angular-slickgrid

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

带有Bootstrap 3导航栏的AngularJS不会在小型设备和散列标记链接上折叠

所以问题来自于我正在尝试使用手机上的项目时,我内部的链接navbar都带有哈希标记链接(#),因为它是AngularJS ...现在我确实找到了一种方法让它完美地工作jQuery的

$('.nav li a').not('.dropdown-toggle').on('click', function(){
    $('.navbar-ex1-collapse').removeClass('in').addClass('collapse');
});
Run Code Online (Sandbox Code Playgroud)

但是因为他们总是说停止使用普通的jQuery或DOM操作......所以我怎么想这样做呢?我是AngularJS的新手,我不擅长开始创建自己的指令,或者我应该只看$ watch?但那我怎么能看到某个类被点击呢?我试图做这个例子
twitter-boostrap-navbar-with-angular-js-collapse-not-functional
但它是专门为Bootstrap 2.3制作的,而且一些属性也改变了,所以我有点困惑.我可以离开jQuery,但你知道......我正在努力学习正确的做法...... :)

哦,如果有帮助,我的navbarBootstrap 3菜单看起来像这样

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" …
Run Code Online (Sandbox Code Playgroud)

twitter-bootstrap angularjs

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

NestJS:如何从从 JWT AuthGuard 扩展的 GraphQL 自定义 Guard 中的请求中获取用户

我使用 Passport 和 GraphQL,如果我使用自己的自定义防护来获取用户的角色,那么它就不起作用。我无权通过 Guard 中的请求访问用户,这是故意的吗?我认为它应该是请求的一部分(我对 NestJS 完全陌生),那么为什么我不能得到它呢?我想直接从用户对象获取用户的角色,并且只允许具有管理员权限的用户执行特定的路由,例如完整的用户列表。

这是我的 GraphQL 守卫,控制台日志总是返回未定义

@Injectable()
export class GraphqlPassportAuthGuard extends AuthGuard('jwt') {
  roles: string[];

  constructor(roles?: string | string[]) {
    super();
    this.roles = Array.isArray(roles) ? roles : [roles];
  }

  canActivate(context: ExecutionContext): boolean {
    const ctx = GqlExecutionContext.create(context);
    const req = ctx.getContext().req;
    console.log('graphql guard user', req && req.user)
    return true;
  }

  getRequest(context: ExecutionContext) {
    const ctx = GqlExecutionContext.create(context);
    const req = ctx.getContext().req;
    console.log('graphql guard user', req && req.user)
    return req;
  }
}
Run Code Online (Sandbox Code Playgroud)

我尝试通过以下代码使用它

export const CurrentUser …
Run Code Online (Sandbox Code Playgroud)

typescript graphql nestjs

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

从AngularJS如何将数据从控制器+模板传递到另一个控制器+模板?

我正在为后端构建一个使用AngularJS和Slim PHP框架的应用程序,现在我完成了我的第一个表单并为它创建了一个模板路径.现在我的问题出现了,当我想将数据传递给另一个控制器时,我需要将数据传递给另一个控制器+视图(模板),我不想污染我的第一个视图既不是它的控制器,所以我真的想要/需要将数据传递给另一个控制器,我可以用我的数据和另一种形式(第二种形式用于计算和其他东西)...所以你可以调用第一个控制器预先保存,同时真正的数据保存(后端到DB)只会发生在第二个控制器+模板中.这是我的第一个模板视图,其中包含以下形式:

<form novalidate id="formAdd" name="formAdd" class="form-horizontal well col-md-7 col-md-pull-5" method="post">
    <fieldset>
        <legend>Transaction form</legend>

        <div class="form-group">
            <label for="symbol" class="col-sm-4 control-label">Symbol</label>
            <div class="col-sm-5 symbols">
                <input type="text" name="symbol" class="form-control" ng-model="trsn.symbol" placeholder="symbol" required />
          </div>  
        </div>                    
        <div class="form-group">
            <label for="accnt_id" class="col-sm-4 control-label">Account</label>
            <div class="col-sm-5">
                <select id="accnt_id" name="accnt_id" ng-model="trsn.accnt_id" class="form-control" required>
                    <option value="">...</option>   
                    <option ng-repeat="account in trsn.accounts" value="{{account.accnt_id}}">{{account.accnt_name}}</option>
                </select>
            </div>
        </div> 
        <!-- ....etc, etc.... -->

        <div class="form-actions col-sm-8 col-sm-offset-4">
            <button type="submit" name="save_btn" class="btn btn-primary" ng-disabled="formAdd.$invalid" ng-click="preSaveTrsn(trsn, formAdd)">Save transaction</button>
            <button type="reset" class="btn btn-default">Cancel</button>
        </div>          
    </fieldset> …
Run Code Online (Sandbox Code Playgroud)

angularjs

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

角度生成路由链接

我对 angular 很陌生,我无法弄清楚如何在不导航到它的情况下以编程方式生成路由链接。

我正在使用 angular-slickgrid 并且我在一些需要生成一些 HTML 来呈现单元格的列上有一个自定义格式化程序,我想在那里有一个单独组件的链接:

const formatZoneCell: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid?: any) =>
{
  if (value === undefined) { return (""); }
  var zone = 0;
  return (`<span>${value} - <a ?>details</a></span>`);
}
Run Code Online (Sandbox Code Playgroud)

我已经尝试了一些东西在哪里?是,就像 '[routerLink]="[...]"' 但显然它没有得到评估。该函数中有没有办法在返回之前生成链接,还是必须对其进行硬编码?

我知道一个解决方案是有一个 onclick 事件并调用一个函数,然后该函数将执行 router.navigate 调用,但我没有走这条路,因为我认为这会生成用户在悬停时看不到的链接。

额外的问题,如果有人知道使用 angular-slickgrid 为每个单元格定义上下文菜单的方法,我将不胜感激。看起来有一些上下文菜单选项,但似乎没有一个很好的方法可以知道单击了哪个单元格,这就是为什么我试图通过格式化程序在单元格本身中添加链接,但这不是很漂亮。

我希望能够向该右键单击菜单添加一个条目“详细信息”,该菜单将链接到我的其他页面,并根据右键单击哪个单元格使用适当的参数。

javascript angular angular-slickgrid

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