如何从组件中检索值

我已经创建了表单组件。在该表单中，我也有一个范围组件。我想知道如何从我的范围组件中检索我的值，更一般地说，如何从外部与组件进行交互。（即使目标是封装东西）我不知道是否有像这样的组件，但现在我只想了解它是如何工作的。谢谢！如何从组件中检索值

这里是我的代码

的index.html

<!DOCTYPE html> 

<html ng-app> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>data_generator_front</title> 
    </head> 

    <body> 

    <my-form></my-form> 

    <div class="results"></div> 

    <script type="application/dart" src="index.dart"></script> 
    <script src="packages/browser/dart.js"></script> 

    </body> 
</html>

index.dart

import "package:angular/angular.dart"; 
import "package:angular/application_factory.dart"; 
import "package:data_generator_front/component/my_form.dart"; 
import "package:data_generator_front/component/range.dart"; 

@Injectable() 
class RootContext { 
    String myProperty = "jeahhhhhhhh"; 
    void method1() { 
     print("method1"); 
    } 
} 

main() { 
    applicationFactory() 
     .rootContextType(RootContext) 
     .addModule(new DateFormModule()) 
     .addModule(new RangeComponentModule()) 
     .run(); 
}

my_form.html

<form> 
    <range name="years" value="myProp"></range> 
    <div> 
     <label>Random:</label> 
     <input type="checkbox" ng-model="random"> 
    </div> 
    <div> 
     <input type="submit" value="Go !"> 
    </div> 
</form>

my_form.dart

library my_form; 
import "package:angular/angular.dart"; 

@Component(selector: "my-form", templateUrl: "my_form.html", exportExpressions: const ["submit"]) 
class DateFormComponent { 

    @NgOneWay("random") 
    bool random; 

    submit() { 
     print("hello");  
    } 

} 

class DateFormModule extends Module { 
    DateFormModule() { 
     bind(DateFormComponent); 
    } 
}

range.dart

import "package:angular/angular.dart"; 

@Component(selector: "range", templateUrl: "range.html") 
class RangeComponent { 
    @NgAttr("name") 
    String name; 

    @NgOneWay("range_begin") 
    String range_begin; 

    @NgOneWay("range_end") 
    String range_end; 

    List<String> ranges = []; 

    addRange() { 
     ranges.add("$range_begin-$range_end"); 
     range_begin = ""; 
     range_end = ""; 
    } 

    info(){ 
     print(range_begin); 
     print(range_end); 
     print(ranges); 
     print(ranges.reduce((begin, item){ 
     return begin += ",$item"; 
    })); 
    } 

} 

class RangeComponentModule extends Module { 
    RangeComponentModule() { 
     bind(RangeComponent); 
    } 
}

range.html

<div> 
    <label>{{name}}:</label> 
    <input type="text" placeholder="begin" size="8" ng-model="range_begin"> 
    <input type="text" placeholder="end" size="8" ng-model="range_end"> 
    <input type="submit" value="add" ng-click="addRange()" > 
    <input type="submit" value="info" ng-click="info()" > 
    <input type="submit" value="value" ng-click="range()" > 
</div>

来源

2014-10-18 BenNG

我猜改变NgOneWay到NgTwoWay应该做的伎俩所以价值获取组件内部进行更新。要获取值的组件绑定

<range name="years" value="{{myProp}}"></range>

外部的，并且你my-form组件创建一个字段。

@NgTwoWay('myProp') 
var myProp;

或者你可以实现ScopeAware得到的范围，然后用scope.emit，scope.broadcast，scope.on...，将数据发送上提交事件在整个DOM送它不只是眼前的父/子

来源

2014-10-18 12:55:27

几乎:)但它只能用一种方式

我初始化my_form.dart中的属性，然后my_form.html具有绑定的值，最后范围组件可以在init时使用该值。

但是当我改变组件中的代码值不与my_form.dart

这里了绑定的是代码

range.html没有改变

my_form .dart

library my_form; 
import "package:angular/angular.dart"; 

@Component(selector: "my-form", templateUrl: "my_form.html", exportExpressions: const ["submit"]) 
class DateFormComponent { 

    @NgOneWay("random") 
    bool random; 

    @NgTwoWay("v1") 
    String v1 = "eee"; 

    submit() { 
     print(random); 
     print(v1); 
    } 

} 

class DateFormModule extends Module { 
    DateFormModule() { 
     bind(DateFormComponent); 
    } 
}

my_form.html

<form> 
    <range name="years" value="{{v1}}"></range> 
    <div> 
     <label>Random:</label> 
     <input type="checkbox" ng-model="random"> 
    </div> 
    <div> 
     <input type="submit" value="Go !" ng-click="submit()"> 
    </div> 
</form>

范围。镖

import "package:angular/angular.dart"; 

@Component(selector: "range", templateUrl: "range.html") 
class RangeComponent { 
    @NgAttr("name") 
    String name; 

    @NgAttr("value") 
    String value; 

    @NgOneWay("range_begin") 
    String range_begin; 

    @NgOneWay("range_end") 
    String range_end; 

    List<String> ranges = []; 

    addRange() { 
     ranges.add("$range_begin-$range_end"); 
     range_begin = ""; 
     range_end = ""; 
     value = ranges.reduce((begin, item){ 
     return begin += ",$item"; 
     }); 
    } 

    info(){ 
     print(range_begin); 
     print(range_end); 
     print(ranges); 
     print(value); 
    } 

} 

class RangeComponentModule extends Module { 
    RangeComponentModule() { 
     bind(RangeComponent); 
    } 
}

感谢帮助反正:)

来源

2014-10-18 14:26:54 BenNG

'@NgAttr（ “值”）字符串值;'应该是'@ NgTwoWay'。 '@ NgAttr'仅用于绑定文字值。 – 2014-10-18 14:35:49

通过像你说的改变，我有一个例外：解析器错误：意外的标记{，[{{v1}}] 中第2列的预期标识符，关键字或字符串，但没有{{}}它的工作原理。我认为{{}}需要绑定？ – BenNG 2014-10-18 15:00:29

好吧我刚刚看到（at）NgAttr，（at）NgOneWay和（at）NgTwoWay绑定DOM属性的实例属性... cool thx :) – BenNG 2014-10-18 15:09:26

如何从组件中检索值

回答

相关问题