angular.module('list',[]).controller('listController',ListController);
var app = angular.module('myapp',['list']).controller('appController',AppController);

function AppController() {
  this.name = "MiSAE";
  this.fetch = function() {
    console.log("feching");
    //change ListController list
    //do something else
  }
}

function ListController() {
  this.list = [1,2,3];
  this.revert = function() {
    this.list.reverse();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<divng-app="myapp" ng-controller="appController as App">

  <div>
    Name:
    <input type="text" ng-model="App.name" />
    <button ng-click="App.fetch()">Fetch</button>
  </div>

  <divng-controller="listController as List">
    <button ng-click="List.revert()">Revert</button>
    <ul>
      <li ng-repeat="item in List.list">{{item}}</li>
    </ul>
  </div>

</div>

解决方法

var list = angular.module('listModule',[]);

list.controller('listCtrl',function() {
    this.reverse = function() {
        this.items = [].concat(this.items).reverse();
        this.onUpdate({ newValue: this.items });
    };
});

list.component('list',{
  bindings: {
    items: '<',onUpdate: '&'
  },controller: 'listCtrl',template: '<button ng-click="$ctrl.reverse()">Revert</button><ul><li ng-repeat="item in $ctrl.items">{{ item }}</li></ul>'
});

var app = angular.module('app',['listModule']);

<list data-items="list" data-on-update="updateList(newValue)"></list>

getCustomer() {
    return this.http.get('/someUrl').map(res => res.json());
}

如果我们采取这个可观察并添加多个订阅者：

let network$ = getCustomer();

let subscriber1 = network$.subscribe(...);
let subscriber2 = network$.subscribe(...);

我们要做的是确保这不会导致多个网络请求。

这可能看起来像一个不寻常的情况，但其实是很常见的：例如，如果调用者订阅了observable显示一个错误消息，并将其传递给模板使用async管道，我们已经有两个订阅者。

在RxJs 5中正确的做法是什么？

也就是说，这似乎工作正常：

getCustomer() {
    return this.http.get('/someUrl').map(res => res.json()).share();
}

但是这是在RxJs 5中这样做的惯用方法，还是我们应该做别的事情呢？

import {Injectable} from '@angular/core';
import {Http,Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/observable/of';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
import {Data} from './data';

@Injectable()
export class DataService {
  private url:string = 'https://cors-test.appspot.com/test';

  private data: Data;
  private observable: Observable<any>;

  constructor(private http:Http) {}

  getData() {
    if(this.data) {
      // if `data` is available just return it as `Observable`
      return Observable.of(this.data); 
    } else if(this.observable) {
      // if `this.observable` is set then the request is in progress
      // return the `Observable` for the ongoing request
      return this.observable;
    } else {
      // example header (not necessary)
      let headers = new Headers();
      headers.append('Content-Type','application/json');
      // create the request,store the `Observable` for subsequent subscribers
      this.observable = this.http.get(this.url,{
        headers: headers
      })
      .map(response =>  {
        // when the cached data is available we don't need the `Observable` reference anymore
        this.observable = null;

        if(response.status == 400) {
          return "FAILURE";
        } else if(response.status == 200) {
          this.data = new Data(response.json());
          return this.data;
        }
        // make it shared so more than one subscriber can get the result
      })
      .share();
      return this.observable;
    }
  }
}

Plunker example

另请参见缓存HTTP响应以获得更多RXjsy方法

我正在 Angular2 应用程序上工作，我需要显示-但是disable是<a> HTML 元素。正确的方法是什么？

更新

请注意*ngFor，这会阻止使用选项，*ngIf而不是<a>完全渲染。

<a *ngFor="let link of links"
   href="#" 
   [class.disabled]="isDisabled(link)" 
   (click)="onClick(link)">
   {{ link.name }}
</a>

该 打字稿 组件有一个方法，看起来像这样：

onClick(link: LinkObj) {
    // Do something relevant with the object... 
    return false;
}

我实际上需要防止元素被单击，而不仅仅是与 CSS
一起出现。我以为我首先需要潜在地绑定到[disabled]属性，但这是不正确的，因为锚元素没有disabled属性。

我查看并考虑过使用，pointer-events: none但是这妨碍了我的cursor: not-allowed工作方式-这是要求的一部分。

<div ng-repeat="item in data.education_list">
   <a href="" ng-click="deleteEducation(item)">Delete</a>
</div>

$scope.deleteEducation = function (item){
    $scope.data.education_list.splice($scope.data.education_list.indexOf(item),1);
}

[{"name":"Test1","time":"01 Hun 2004 - 12 Sun 2006","Idusereducation":"86","usereducationIdToUser":"702","type":"1"}]

{"1" : {obj},2 : "obj"}

解决方法

<div ng-repeat="item in data.education_list">
   <a href="" ng-click="data.education_list.slice($index,1)">Delete</a>
</div>

this.removeItem = function(item) {
    var index = $scope.data.education_list.indexOf(item);
    if (index != -1) {
        $scope.data.education_list.splice(index,1);
    }
  };

ng-click="myctrl.removeItem(item)"

我正在使用passportjs的Facebook模块，Express和Angular。我相信我有护照正确执行，但不知道1)我应该如何检查用户是否登录，以及2)根据用户状态显示视图的最佳做法，使用Angular&表现。我在这里看了一个例子，但不要以为这是我应该用Angular(https://github.com/jaredhanson/passport-facebook)

谢谢！

对于Express部分，您必须使用真棒护照节点模块来处理服务器端身份验证。

你有这里的所有细节：https://vickev.com/#!/article/authentication-in-single-page-applications-node-js-passportjs-angularjs

这篇文章真的很棒，Brad Green(Google AngularJS的工程总监)向我介绍了这篇文章。

希望有帮助

如果您想了解更多有关Angular安全性的内容，您只需要问问，我们很乐意为您提供帮助。