小编Mar*_*cok的帖子

假设我熟悉在jQuery中开发客户端应用程序,但现在我想开始使用AngularJS.你能描述一下必要的范式转变吗？以下是一些可能有助于您确定答案的问题:

• 如何以不同方式构建和设计客户端Web应用程序？最大的区别是什么？
• 我应该停止做什么/使用什么; 我应该开始做什么/使用呢？
• 是否存在任何服务器端注意事项/限制？

我不是在寻找jQuery和之间的详细比较AngularJS.

该API参考范围页面说:

范围可以从父范围继承.

该开发者指南范围页说:

范围(原型)从其父范围继承属性.

那么,子范围是否始终从其父范围继承原型？有例外吗？当它继承时,它是否总是正常的JavaScript原型继承？

我究竟做错了什么？

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

@Component({
  selector: 'conf-talks',
  template: `<div *ngFor="let talk in talks">
     {{talk.title}} by {{talk.speaker}}
     <p>{{talk.description}}
   </div>`
})
class ConfTalks {
  talks = [ {title: 't1', speaker: 'Brian', description: 'talk 1'},
            {title: 't2', speaker: 'Julie', description: 'talk 2'}];
}
@Component({
  selector: 'my-app',
  directives: [ConfTalks],
  template: '<conf-talks></conf-talks>'
})
class App {}
bootstrap(App, [])

错误是

EXCEPTION: Template parse errors:
Can't bind to 'ngForIn' since it isn't a known native property
("<div [ERROR ->]*ngFor="let talk in talks">

Q1.假设我想要在按下主"删除"按钮之前改变用户标记为删除的每个"项目"的外观.(这种直接的视觉反馈应该消除了对"你确定吗？"对话框的谚语的需要.)用户将检查复选框以指示应删除哪些项目.如果未选中复选框,则该项应恢复为正常状态.

应用或删除CSS样式的最佳方法是什么？

Q2.假设我想允许每个用户个性化我的网站的呈现方式.例如,从一组固定的字体大小中选择,允许用户可定义的前景色和背景色等.

应用用户选择/输入的CSS样式的最佳方法是什么？

我正在寻找一些可以用来帮助确定在编写新指令时使用哪种类型的范围的指南.理想情况下,我想要一个类似于流程图的东西,它会引导我解决一堆问题并弹出正确答案 - 没有新的新范围,新的子范围或新的隔离范围 - 但这可能要求太多.这是我目前微不足道的指导方针:

• 如果使用该指令的元素使用ng-model,
  请不要使用隔离范围 请参阅我是否可以将ng-model与隔离范围一起使用？而
  为什么格式化并不孤立的范围内工作？
• 如果指令未修改任何范围/模型属性,请不要创建新范围
• 如果指令封装了一组DOM元素(文档说"复杂的DOM结构")并且该指令将用作元素,或者在同一元素上没有其他指令,则隔离范围似乎运行良好.

我知道在元素上使用带有隔离范围的指令会强制同一元素上的所有其他指令使用相同(一个)隔离范围,因此当使用隔离范围时,这不会严重限制吗？

我希望来自Angular-UI团队的一些人(或其他已写过许多指令的人)可以分享他们的经验.

请不要添加简单地说"为可重用组件使用隔离范围"的答案.

我究竟做错了什么？

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

@Component({
  selector: 'conf-talks',
  template: `<div *ngFor="talk of talks">
     {{talk.title}} by {{talk.speaker}}
     <p>{{talk.description}}
   </div>`
})
class ConfTalks {
  talks = [ {title: 't1', speaker: 'Brian', description: 'talk 1'},
            {title: 't2', speaker: 'Julie', description: 'talk 2'}];
}
@Component({
  selector: 'my-app',
  directives: [ConfTalks],
  template: '<conf-talks></conf-talks>'
})
class App {}
bootstrap(App, [])

错误是

EXCEPTION: Template parse errors:
Can't bind to 'ngFor' since it isn't a known native property
("<div [ERROR ->]*ngFor="talk of talks">

我正在尝试编写一个函数,使我能够在单击按钮时删除项目,但我认为我对该函数感到困惑 - 我使用了$digest吗？

HTML和app.js:

<ul ng-repeat="bday in bdays">
  <li>
    <span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
    <form ng-show="editing" ng-submit="editing = false">
      <label>Name:</label>
      <input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
      <label>Date:</label>
      <input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
      <br/>
      <button class="btn" type="submit">Save</button>
      <a class="btn" ng-click="remove()">Delete</a>
    </form>
  </li>
</ul>

$scope.remove = function(){
  $scope.newBirthday = $scope.$digest();
};

如果答案是可接受的答案,我试图显示一个复选标记:

template: `<div ngIf="answer.accepted">&#10004;</div>`

但我得到这个错误:

EXCEPTION: No provider for TemplateRef! (NgIf ->TemplateRef)

我究竟做错了什么？

我在AngularJS中使用ngChange来触发一个自定义函数,该函数将删除用户添加到输入的任何字母.

<input type="text" name="inputName" data-ng-change="numbersOnly()"/>

问题是我需要定位触发的输入,numbersOnly()以便我可以删除输入的字母.我在Google上看了很长时间,并且无法找到任何与此有关的内容.

我能做什么？

我在Angular2中创建一个由Object数组而不是字符串支持的选择时遇到了麻烦.我知道如何使用ngOptions在AngularJS中执行此操作,但它似乎不适用于Angular2(我使用的是alpha 42).

在下面的示例中,我有四个选择,但只有两个选择.

1. 'Select String'是一个简单的基于字符串的选择,它工作正常.
2. '通过双向绑定选择对象'是我尝试使用双向绑定.不幸的是,它以两种方式失败 - 当页面加载时,select显示错误的值(foo而不是bar),当我在列表中选择一个选项时,值'[object Object]'被发送到后备存储而不是正确的价值.
3. '通过事件选择对象'是我尝试从$ event获取所选值.它也以两种方式失败 - 初始加载与#2一样不正确,当我在列表中选择一个选项时,从事件中检索到'[object Object]'的值,所以我不能得到正确的价值.选择被清除.
4. '通过字符串选择对象'是使用有效对象的唯一方法.不幸的是,它确实通过使用#1中的字符串数组并将值从字符串转换为对象和返回来实现.

如果这是预期的方式,我可以做#4,但它看起来很笨重.还有另一种方法吗？我是不是太早了？我做了些傻事吗？

import {Component, FORM_DIRECTIVES, NgFor} from 'angular2/angular2';

interface TestObject {
  name:string;
  value:number;
}

@Component({
  selector: 'app',
  template: `
    <h4>Select String</h4>
    <select [(ng-model)]="strValue">
        <option *ng-for="#o of strArray" [value]="o">{{o}}</option>
    </select>

    <h4>Select Object via 2-way binding</h4>
    <select [(ng-model)]="objValue1">
        <option *ng-for="#o of objArray" [value]="o">{{o.name}}</option>
    </select>

    <h4>Select Object via event</h4>
    <select [ng-model]="objValue2" (change)="updateObjValue2($event)">
        <option *ng-for="#o of objArray" [value]="o">{{o.name}}</option>
    </select>

    <h4>Select Object via string</h4>
    <select [ng-model]="objValue3.name" (change)="updateObjValue3($event)"> …