小编Mar*_*cok的帖子

我需要显示/隐藏部分组件.这是Angular2的例子.

<li *ngFor=" #item of items " >
  <a href="#" (onclick)="hideme = !hideme">Click</a>
  <div [hidden]="hideme">Hide</div>
</li>

假设我们只有2个项目.这里的问题是它适用于这两个项目.所以它隐藏并显示了两个组件中的div部分.如果我们能有这样的东西,它可能是完美的:

<li *ngFor=" #item of items " >
   <a href="#" (onclick)="this.hideme = !this.hideme">Click</a>
   <div [hidden]="this.hideme">Hide</div>
</li>

那么有一些简单的方法可以解决这个问题吗？

假设我有一个控制器用于正在呈现的页面ng-view.

此控制器绑定到外部源(例如应用程序范围的消息总线)的某些事件以更新其模型.这基本上非常简单:

function MyController ($scope) {
  $scope.bar = '…';

  externalSource.on('foo', function (data) {
    $scope.$apply(function () {
      $scope.bar = data.bar;
    });
  });
}

问题是:如果控制器与其关联的视图不再显示,我如何从外部源取消绑定控制器？

是否存在诸如dispose事件或类似事物之类的东西？

或者我的方法是完全错误的,我应该以其他方式处理类似的事情？如果是这样,怎么样？

我有这个角度代码:

<div class="element-wrapper" ng-repeat="element in elements">
  <div class="first-wrapper">
     <div class="button" ng-click="doSomething(element,$event)">{{element.name}}</div>   
  </div>
  <div class="second-wrapper">
    <input type="text" value="{{element.value}}">    
  </div>
</div>

我想要发生的事情:当用户点击按钮时 - 输入元素将被聚焦.

单击按钮元素并将其聚焦后,如何找到输入元素？

我可以做一个看起来像这样的函数:

function doSomething(element,$event) {
  //option A - start manipulating in the dark:
  $event.srcElement.parentNode.childNodes[1]

  //option B - wrapping it with jQuery:
   $($event.srcElement).closest('.element-wrapper').find('input').focus();
}

它们都不起作用 - 是否有更好的角度方法可以做到这一点？使用功能,如.closest()与.find()在jQuery的？

更新:

我发现这个黑客工作(但它似乎仍然不是正确的解决方案):

function doSomething(element,$event) {
   setTimeout(function(){
     $($event.srcElement).closest('.element-wrapper').find('input').focus();
   },0)
}

我用setTimeout包装它,所以在Angular完成它的所有操作后,它会聚焦在input元素上.

我正在编写一个将异步检索数据的服务($ http或$ resource).我可以通过返回一个最初为空的数组来隐藏它是异步的这一事实,但最终会被填充:

.factory('NewsfeedService1', ['$http', function($http) {
   var posts = [];
   var server_queried = false;
   return {
      posts: function() {
         if(!server_queried) {
            $http.get('json1.txt').success(
              function(data) {
                server_queried = true;
                angular.copy(data, posts);
            });
         }
         return posts;
      }
   };
}])
.controller('Ctrl1', ['$scope','NewsfeedService1',
function($scope, NewsfeedService1) {
    $scope.posts = NewsfeedService1.posts();
}])

或者我可以通过回复承诺来暴露异步性:

.factory('NewsfeedService2', ['$http', function($http) {
  var posts = [];
  var server_queried = false;
  var promise;
  return {
     posts_async: function() {
       if(!promise || !server_queried) {
         promise = $http.get('json2.txt').then(
           function(response) {
              server_queried = true;
              posts = …

我正在尝试使用Angular 2-beta,我想使用Http组件.但这里有一个严重的问题:

我读过这篇文章,我知道在Angular 2中(与Angular 1不同),Http组件不是一个返回Promise的服务.它返回一个名为Observable的东西.我们知道组件最好不要直接使用Http.有效的方法是制作一个负责消费Http的服务.但是如何？!在完成请求后,是否应该返回承诺？(看这里)

它有意义吗？!

也许这是正常行为,进行测试,this.myColor这是未定义的,但为什么呢？我的代码错误的错误:

<h1 myDR [myColor]="red" > Test </h1>

import {Component, Directive, Input, ElementRef} from 'angular2/core';

@Directive({
    selector: '[myDR]',
    host:{
        '(mouseenter)' : ' mouseEnter()'
    }
})

export class MyDi {

    @Input () myColor: string;

    constructor(private el:ElementRef) {

    }

    mouseEnter(){

        this.el.nativeElement.style.backgroundColor = this.myColor;

        console.log(this.myColor);
     }
}

@Component({
    selector: 'my-app',
    template: `<h1>Hello World Angular2</h1> 

              <h1 myDR [myColor]="red" > Test </h1>
              `,
    directives: [MyDi]
})

export class App {
    constructor(){

    }
}

您可以将鼠标移到"测试"上并查看控制台

Plunker

我正在尝试创建一个简单的示例项目来测试角度2更改检测机制:我在主索引页面上的脚本标记中创建一个纯javascript对象.它包含以下内容:

        var Tryout = {};
        Tryout.text = "Original text here";
        Tryout.printme = function(){
            console.log(Tryout.text);
        }
        Tryout.changeme = function(){
            Tryout.text = "Change was made";
        }

一个用于控制台登录的功能,另一个用于更改文本属性.

现在在Angular 2中,代码如下所示:

import {Component} from "angular2/core"

@Component({
    selector: 'my-app',
    template: `
        <h1>{{TryoutRef.text}}</h1>
        <input type="text" [(ngModel)]="TryoutRef.text">
        <button (click)="consoleLogMe()">Console Log</button>
        <button (click)="changeMe()">Change me inside</button>
    `
})

export class MyApp{

    TryoutRef:any = Tryout;
    constructor(){
    }
    changeMe(){
        this.TryoutRef.changeme();
    }
    consoleLogMe(){
        console.log(this.TryoutRef.text);
    }

}
declare var Tryout:string;

我想要做的是:当我通常使用onclick(完全在角度之外)调用函数Tryout.printme()时,我希望angular检测更改并更新屏幕.

我成功了这一点:当我从组件调用Tryout.printme()时(changeme()函数调用Tryout.printme()),Angular检测到更改并更新UI,这很好.此外,当我从外部角度更改并从Angular调用consoleLogMe()时,它会记录更改的文本并更新UI.

我想我需要在Angular以某种方式运行的同一区域中执行Tryout.changeme().有任何想法吗？我有一个很大的项目,它是在纯javascript/jquery中完成的,现在我慢慢地需要将把手模板重写为angular2组件而不触及模型(尚未).为此,我需要强制模型在与角度相同的区域中执行.

如果我想在Angular 1中执行类似的操作,我只需要$ scope.$ apply它可以工作.

这是示例中的gif:

我有以下格式的每小时天气数据:

Date,DBT
01/01/2000 01:00,30
01/01/2000 02:00,31
01/01/2000 03:00,33
...
...
12/31/2000 23:00,25

我需要的是每日聚合最大值,最小值,如此:

Date,MaxDBT,MinDBT,AveDBT
01/01/2000,36,23,28
01/02/2000,34,22,29
01/03/2000,32,25,30
...
...
12/31/2000,35,9,20

在R中如何做到这一点？

我正在浏览angular.io(Angular 2)的分步教程.我正在使用打字稿.尝试编译时出现以下错误:

Cannot find external module 'angular2/angular2'

使用watch命令.

main.ts

import {Component, View, bootstrap} from 'angular2/angular2';

@Component({
  selector: 'my-app'
})

@View({
  template: '<h1>My first Angular 2 App</h1>'
})

class AppComponent {
}

bootstrap(AppComponent);

的index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.23/angular2.dev.js"></script>
  </head>
  <body>

    <my-app></my-app>

    <script>
      System.import('main');    
    </script>

  </body>
</html>

问:为什么会出现这个错误？

我正在通过指令创建一个可重用的html.html会有一些我希望从原始范围传递的变量.通过在指令上声明属性,然后创建隔离范围并捕获它们,可以轻松完成此操作.问题是,对于大量变量,有更好的方法吗？我想过要传递一个像这样的物体{firstAttr: $scope.one, secondAttr: $scope.two...}并将这个物体分开以获得每件物品.这是第一次工作,但双向数据绑定不起作用(即使使用'=').

问题在于绑定的是对象,而不是对象的每个部分.我可以使用指令中的compile函数将每个属性添加到元素中吗？所以:

<mydirective databinding="{one:'first one', two:'second one'}">

将被翻译成:

<mydirective one="first one" two="second one">

这样,通过捕获指令中的属性,我的数据绑定将按预期工作.我将如何完成该设计,还是完全采用另一种方式来实现这一目标？