小编Ang*_*hef的帖子

我有一个AngularJS 指令,它在以下模板中呈现实体集合:

<table class="table">
  <thead>
    <tr>
      <th><input type="checkbox" ng-click="selectAll()"></th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="e in entities">
      <td><input type="checkbox" name="selected" ng-click="updateSelection($event, e.id)"></td>
      <td>{{e.title}}</td>
    </tr>
  </tbody>
</table>

正如您所看到的,<table>每个行都可以使用自己的复选框单独选择,或者可以使用主复选框一次选择所有行<thead>.很经典的UI.

什么是最好的方式:

• 选择一行(即选中复选框时,将所选实体的id添加到内部数组,并将CSS类添加到<tr>包含实体以反映其选定状态)？
• 一次选择所有行？(即对所有行执行前面描述的操作<table>)

我目前的实现是为我的指令添加一个自定义控制器:

controller: function($scope) {

    // Array of currently selected IDs.
    var selected = $scope.selected = [];

    // Update the selection when a checkbox is clicked.
    $scope.updateSelection = function($event, id) {

        var checkbox = $event.target;
        var action = (checkbox.checked ? 'add' : …

我的后端经常将数据作为数组返回到RxJS 5 Observable中(我使用的是Angular 2).

我经常发现自己想要使用RxJS运算符单独处理数组项,我使用以下代码(JSBin)执行此操作:

const dataFromBackend = Rx.Observable.of([
  { name: 'item1', active: true },
  { name: 'item2', active: false },
  { name: 'item3', active: true }
]);

dataFromBackend
  // At this point, the obs emits a SINGLE array of items
  .do(items => console.log(items))
  // I flatten the array so that the obs emits each item INDIVIDUALLY
  .mergeMap(val => val)
  // At this point, the obs emits each item individually
  .do(item => …

我在AngularJS中有以下静态表单:

<form name="myForm" class="form-horizontal">

  <label>First Name:</label>
  <input type="text" name="first_name" ng-model="entity.first_name">

  <label>Last Name:</label>
  <input type="text" name="last_name" ng-model="entity.last_name">

</form>

Angular为我创建了FormController并将其发布到范围内(在表单名称下).这意味着我可以访问以下属性:

$scope.myForm.first_name.$error
$scope.myForm.last_name.$invalid
...

这超级有用!

但在我的情况下,我正在使用指令动态构建表单:

<form name="myForm" class="form-horizontal">

  <field which="first_name"></field>
  <field which="last_name"></field>

</form>

该<field>指令不解决实际<input>元素,直到过了一段时间(我已经从服务器获得的一些数据后,链接的指令等).

这里的问题是在窗体控制器上没有定义任何字段属性,就像动态字段没有在FormController中注册一样:

// The following properties are UNDEFINED (but $scope.myForm exists)
$scope.myForm.first_name
$scope.myForm.last_name

知道为什么吗？任何解决方案/解决方法？

你可以在这个jsFiddle中看到整个代码:http:
//jsfiddle.net/vincedo/3wcYV/

说我有以下标记:

<my-comp myDirective></my-comp>

有没有办法可以从指令访问组件实例？

更具体地说,我希望能够访问MyComponentfrom 的属性和方法MyDirective,理想情况下不向上面的HTML添加任何内容.

我目前正在尝试使用CasperJS和PhantomJS(这两个都是优秀的工具,感谢n1k0和Ariya)来抓取谷歌关键字工具,但我无法让它发挥作用.

这是我目前的流程:

1. 使用我的Google帐户登录(以避免在关键字工具中使用验证码).
2. 导航到"关键字工具"页面.
3. 填写搜索表单并按Search.

我坚持第3步:搜索表单不是常规HTML表单,我不能使用Casper#fill(),所以我直接访问字段.以下是我尝试更改Word or phrase字段值的一些语法:

this.evaluate(function() {

    // Trying to change the value...
    document.querySelector('textarea.sP3.sBFB').value = 'MY SUPER KEYWORDS';
    document.querySelector('textarea.sP3.sBFB').setAttribute('value', 'MY SUPER KEYWORDS');
    document.querySelector('textarea').value = 'MY SUPER KEYWORDS';   // there's only one <textarea> on the page

    // Trying to change other attributes...
    document.querySelector('textarea.sP3.sBFB').textContent = 'MY SUPER KEYWORDS';
    document.querySelector('textarea').style.backgroundColor = 'yellow';
});

什么都行不通.我正在做一个Casper#capture()正确的,看看该字段包含什么.正如您所看到的,它确认我在正确的页面上并且我已登录,但它<textarea>是空的.

奇怪的是,我可以访问DOM的其他部分:我可以改变一个链接,说的文本Advanced Options and Filters来___VINCE SAYS HELLO___(见截图),通过执行以下操作:

this.evaluate(function() { …

我正在使用以这种格式返回JSON数据的API:

{
    paging: {
        previous: null,
        next: null
},
    data: [
        { title: 'First Item' },
        { title: 'Second Item' },
        ...
    ]
}

我正在使用Angular的$ resource服务来获取这些数据.
我的代码 - 位于控制器中 - 是这样的:

var Entity = $resource('/api/entities');
var entities = $scope.entities = Entity.get();

然后,在视图中,我可以显示如下数据:

<ul>
  <li ng-repeat="entity in entities.data">{{entity.title}}</<li>
</ul>

一切正常,但是:

• 我宁愿只公开entities.data视图的内容,而不是整个entities对象.如何在填充之前拦截GET请求返回的数据以对其进行修改$scope.entities？
• 相关问题:因为我正在获取一组数据,所以使用它Entity.query()代替它会更干净Entity.get().但是,如果我Entity.query()在上面的代码中使用,我会收到错误"TypeError:Object#没有方法'push'".这是有道理的,因为API返回一个对象而不是一个数组(因此,对象上没有'push'方法).同样,如果我可以.data从响应中提取属性,我会有一个数组.

根据Dan Boyon的这些指示,我设法自定义默认$resource服务并覆盖.get()或.query()方法,但我不知道从那里去哪里.

我正在使用angular2开发一个应用程序.我有一个场景,我需要在路由时使用复杂数据(对象数组)从一个组件传递到另一个组件(它们不是父子,它们是两个独立的组件)(使用router.navigate()).我用Google搜索了这一点,大部分结果都描述了父子组件的场景.我已经完成了结果并找到了传递数据的方法.

1)创建共享服务2)作为路由参数传递

第二种方法对我有效(尽管如此,当我有如上所述的复杂数据时,我不喜欢这种方法).我无法使用共享服务共享数据.所以我的问题是,使用服务的组件之间传递数据只在组件处于父子关系时才有效吗？另外,请告诉我是否还有其他优先方法可以在一个组件和另一个组件之间传递数据？

更新:我在我的场景中添加了一些代码.请让我知道为什么通过共享服务传递数据不起作用的错误.

我有2个组件:1)SearchComponent 2)TransferComponent我在SearchComponent中设置数据,并希望通过utilityService访问TransferComponent中的数据.

公用事业服务

import {Injectable} from "@angular/core";

@Injectable()
export class UtilityService{
    constructor(){

    }
    public bioReagentObject = [];

    routeBioReagentObj(bioReagentObj){
        console.log("From UtilityService...", bioReagentObj);
        for (let each of bioReagentObj)
            this.bioReagentObject.push(each)
        // console.log("From UtilityService",this.bioReagentObject);
    }

    returnObject(){
        console.log("From UtilityService",this.bioReagentObject);
        return this.bioReagentObject
    }



}

searchcomponent.ts

    import {UtilityService} from "../services/utilityservice.component";
    import {Component, OnInit, OnDestroy, Input} from '@angular/core';

@Component({
    selector: 'bioshoppe-search-details',
    providers: [UtilityService],
    templateUrl: 'app/search/searchdetails.component.html',
    styleUrls: ['../../css/style.css']
})

export class SearchDetailsComponent implements OnInit, OnDestroy {
    constructor(private route: ActivatedRoute,
                private utilityService: UtilityService,
                private router: Router) …

根据我对文档的解释,如果我希望能够默认隐藏元素,并在单击链接时显示,则以下内容应该有效吗？

1. 在/app/app.component.ts中

   newTrustFormVisible: false;
   

   Run Code Online (Sandbox Code Playgroud)

2. 在/app/app.component.html中

   <a href="#" (click)="newTrustFormVisible = !newTrustFormVisible;">[Add New]</a>
   
   <div ng-show="newTrustFormVisible" class="panel panel-default">
     ...
   </div>
   

   Run Code Online (Sandbox Code Playgroud)

但是,这不起作用.它也不会产生错误.我错过了什么？

什么:我正在使用Angular构建一个网站,我想将它部署在纯静态服务器(例如Amazon S3)上.我需要在部署之前预先渲染网站的所有HTML页面,我不知道如何继续.

HOW:我目前的想法是让一些爬虫读取一个文件,比如sitemap.xml检索所有网站的URL列表,然后将这些URL的请求发送到安装了Node.js的服务器,我的Angular(通用)应用程序的实例是运行.

问题:这听起来像是正确的方法吗？我错过了一个重要的步骤吗？是否有任何库或npm软件包可以帮助完成此任务？

令人惊讶的是,我找不到任何有关Angular预渲染的文档(仅限RE渲染).我也看过静态站点生成器的灵感,但它们都使用一堆静态文件作为起点(不是URL列表).另外,我不想使用像prerender.io这样的第三方服务.

我正在使用WebStorm进行Angular 2项目.

我在TypeScript和我使用的一个组件中编写代码Observable:

import { Observable } from "rxjs/Rx";
import 'rxjs/Rx';

@Component({...})
export class SearchComponent {

  @ViewChild('input') input: ElementRef;

  ngAfterViewInit() {
    let inputElement = this.input.nativeElement;
    let keyups = Observable.fromEvent(inputElement, 'keyup');  // <-- WebStorm error
    keyups.subscribe(data => console.log(data));
  }
}

这段代码确实有效(每次在输入字段中输入内容时都会记录到控制台),但WebStorm会抱怨该fromEvent方法("未解析的函数或方法").

此外,如果我在Observable类上触发自动完成,则缺少RxJS文档中列出的大多数运算符.例如,打字Observable.fr应该产生的名单from,fromCallback,fromEvent,fromPromise...但WebStorm只表明一种方法(withLatestFrom).

如何在WebStorm中为可观察对象获得正确的自动完成/ TypeScript支持？

我曾尝试不同的方式导入Observable,我已经试过的建议在这篇文章中(即添加"files": ["node_modules/rxjs/Rx.KitchenSink.d.ts"]到tsconfig.json),但毫无效果.