标签: angular-dart

我正在构建一个d3.js用于数据可视化的工具.该工具依赖于webcomponentss和shadowDOM.d3.js无法仅通过选择shadowDOM中的任何节点d3.select.有办法d3在里面工作shadowdom还是我错过了一些明显的东西？

详细地:

d3.select("#insideShadowDom")

没有返回/选择任何东西,只要你有类似的东西

<web-component>
#document-fragment
   <div id="insideShadowDom"></div>
</web-component>

澄清:它shadowDOM是由框架生成的.我找到了获得初始shadowRoot(注入)的方法.但是我一直在想,如果有可能,告诉d3有关shadowDOM,即使我没有手柄createShadowRoot()返回.

Angular Dart教程的主要运行示例是Recipe Book应用程序.关于过滤器和服务的第5章末尾的练习建议尝试" 创建一个[自定义]过滤器,将所有[列出的每种成分]的数量相乘 ",从而允许" 用户加倍,三倍,或者食谱四倍." 例如,当加倍时,"1/2杯面粉"的成分将成为"1杯面粉".

我编写了这样一个自定义过滤器:它需要一个Ingredients 列表(由a quantity和a 组成description)并返回一个新的Ingredients 列表(增加数量),但是我收到以下错误:

5 $digest() iterations reached. Aborting!

我的问题是:AngularDart自定义过滤器call()方法的必需和/或允许行为是什么？例如,显然允许从其输入列表中删除(即过滤)元素,但是它是否还可以添加新元素或替换元素？Dart angular.core NgFilter文档简单地说"过滤器是一个带调用方法的类".我还没有找到更多细节.

从AngularJS帖子的答案推断,似乎重复调用call()should(最终？)会产生"相同的结果".如果是这样,这将是一个合理的约束.

产生"相同的结果"可能意味着call()需要是幂等的,但在Dart的情况下,这种幂等性应该相对于==(对象等价)而不是identical()(对象身份),恕我直言.我使用以下小例子运行了一些测试来说明问题:

• main.dart

    import 'package:angular/angular.dart';

    class A { }

    @NgFilter(name:'myFilter') class MutatingCustomFilter {
      final A _a = new A();
      call(List list) => new List.from(list)..add(_a); // runs ok. …

我有html:

<select ng-model="main.selectedReport" ng-change="main.selectReport()">
                            <option value="">Not selected</option>
                            <option ng-repeat="rep in main.reports" value="{{rep.value1}}">{{rep.value2}}</option>
                        </select>

我的控制器是:

@NgController(selector: '[main-controller]', publishAs: 'main')
class MainController extends FCViewAbstractController {

  Map reports;
  Long selectedReport;

....

  selectReport() {
    print(selectedReport);
  }
}

我的问题是为什么我在selectReport()中获得先前选择的值？例如:在第一次选择时,我得到了空值.

但是angularjs中的版本可以正常工作http://plnkr.co/edit/ILBBWfkRp9tegQZaGZ9u?p=preview

我正试图从这里运行这个简单的代码

import 'package:angular/angular.dart';
  void main() {
    ngBootstrap();
  }

但我收到这个错误:

The function 'ngBootstrap' is not defined

关于发生了什么的任何想法？我已经尝试过'pub get'.

我已经正在使用paper-button点击事件,并试图增加on-click="angularComponent.function"在那里angularComponent.function是内正在使用本文按钮在angular.dart的组件的功能,但点击也不会触发函数调用.然而,有了on-click="angularComponent.function('a','b','c')"它,它确实触发了点击功能(由angular_node_bind模块提供).这意味着我无法获取事件对象,否则将传递给纯dart/polymer元素函数.怎么解决这个问题？

因此,如果我在位于项目的/ web目录中的.dart文件中添加断点,它可以正常工作.例如,我正在使用AngularDart并且main.dart文件可以正常工作.但是,当我尝试在/ lib目录中的任何内容中放置断点时,Dartium不会停止它们.

如何在Dartium中获取断点以使用/ lib目录？

请注意,我尝试使用Dart编辑器,IntelliJ和Dart插件以及直接在Dartium中设置断点,但没有任何效果.这是有意的吗？

我有一个名为的组件button-search,其中包含搜索选项的下拉列表:

<button-search> 
    <item type="identifier">Identifier</item>
    <item type="title">Title</item>
    <item type="city">City</item>
    <item type="town">Town</item>
    <item type="address">Address</item>
    <item type="postal">Postal</item>
    <item type="divider"></item>
    <item type="clear">Clear Search</item>
</button-search>

该item组件不应该直接呈现任何内容,而是将复杂的参数传递给button-search组件,以便button-search组件可以按照应该呈现的方式呈现这些下拉项.

Item 定义如下:

@Component(
    selector: 'item',
    template: '')
class Item {

    @Input() String type = "type-goes-here";

}

ButtonSearch 定义如下:

@Component(
    selector: 'button-search',
    directives: const[Item],
    template: '''
       ... enormous template ...    
    ''')
class ButtonSearch {

    ButtonSearch(@ViewChildren(Item) QueryList<Item> items){

        print(items);

    }
}

我没有看到打印到控制台的9个项目列表,而是我所看到的[].

我试过使用String param而不是对象,但它仍然给我null.

ButtonSearch(@ViewChildren('item') QueryList<Item> items){

1. 我错过了什么来@ViewChildren获取所有项目和打印以外的东西[] …

感觉像一个愚蠢的问题，但我不明白。如何在Angular 2 Dart模板中进行快速字符串连接？

我的组件有一个单独的html文件，可以说my_component.html：

作品：

....
<div id="abc">
{{order.pickupPlace.email}}
</div>
...

作品：

....
<div id="abc">
{{ ((order.pickupPlace.state) ? order.pickupPlace.state+" ":'')}}
</div>
...

不起作用：

....
<div id="abc">
{{"<br/>"+order.pickupPlace.email}}
</div>
...

不起作用：

....
<div id="abc">
{{order.pickupPlace.name+" "+order.pickupPlace.email}}
</div>
...

尝试在此处的文档中找到答案（https://webdev.dartlang.org/angular/guide/template-syntax#!#expression-operators），但是没有运气。

当然，我可以*ngIf在有条件输出的每个元素上使用，但是有没有办法进行简单的字符串连接？

我正在AngularDart中构建一个应用程序，到目前为止一切顺利。我特别喜欢它使表格变得如此容易。但是，我在这方面遇到了一些障碍。

基本上，我想做的是让给定表单元素的ngModel处理不同的数据类型，并根据需要在两者之间来回转换。例如，我<input type='number'/>在HTML中使用一个元素，但在dart业务逻辑方面，我想将该值作为Dart Decimal类处理（来自此处：https：//pub.dartlang.org/packages/小数）），因为我需要避免浮点问题。

我在我的应用程序中大量使用了2路数据绑定和ngModel，因为它很棒并且可以很好地在此应用程序中使用。但是，ngModel在此特定情况下不起作用。显然，我可以解决这个问题，但是我希望有更多的优雅。我希望能够指定一些类或函数，使我可以使用ngModel进行类型转换。

我在Google和文档中四处浏览，怀疑我的解决方案与使用Form Control有关，尽管我对这到底是如何工作有些困惑。我很难找到与我想做的事情相关的示例代码或文档。也许我在那儿树错了树。

这是一个超级简化的示例，说明如果我能确定自己需要做什么，可以完成的工作：

@Component(
  selector: 'my-component',
  template: '...<input type="number" [(ngModel)]="thing.attr"/>...'
)
class MyComponent{

  DataObject thing = new DataObject();
}

class DataObject{
  Decimal attr;
}

我想这是我可能会遇到的很多事情，需要进行类型转换，而不仅仅是在这种情况下专门针对Decimal类，因此任何人的任何帮助或建议都将不胜感激。

更新资料

根据以下Ted Sander的回答，我可以取得一些不错的进步，但是它对我来说还不是很有效，我不确定为什么。

这是我最终得到的代码：

import 'package:angular/angular.dart';
import 'dart:html';
import 'package:angular_forms/angular_forms.dart';

import 'package:decimal/decimal.dart';

@Directive(
  selector: 'input[type=decimal][ngControl],'
      'input[type=decimal][ngFormControl],'
      'input[type=decimal][ngModel]',
)
class DecimalValueAccessor implements ControlValueAccessor {
  final InputElement _element;

  DecimalValueAccessor(HtmlElement element) : _element = element as InputElement;

  @HostListener('change', ['\$event.target.value'])
  @HostListener('input', ['\$event.target.value'])
  void handleChange(String value) …

在部署应用程序时和开发时,我需要使用不同的配置值.如何使用webdev serve和Dart 2进行设置webdev build？