구성 요소에서 값을 검색하는 방법

양식 구성 요소를 만들었습니다. 그 형태의 구성 요소에는 또한 범위 구성 요소가 있습니다. 내 범위 구성 요소에서 내 값을 검색하는 방법과 더 일반적으로 외부에서 구성 요소와 어떻게 상호 작용할 수 있는지 궁금합니다. (목표가 물건을 캡슐화하는 것이라 할지라도) 어딘가에 그런 구성 요소가 있는지는 모르겠지만 지금은 어떻게 작동하는지 배우고 싶습니다. 감사 ! 여기 구성 요소에서 값을 검색하는 방법

는

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

나는 값이 구성 요소 내부에 업데이트됩니다, 그래서 트릭을 할해야 NgOneWayNgTwoWay에 변경 같아요. 구성 요소 바인딩

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

이외의 값을 얻을하고 my-form 구성 요소의 필드를 만듭니다. 또한

@NgTwoWay('myProp') 
var myProp;

당신이 아니라 바로 상위/하위

출처

2014-10-18 12:55:27

에 DOM을 통해 그것을 보내 제출에 이벤트로 데이터를 전송하는 scope.emit, scope.broadcast, scope.on...을 사용하여 다음 범위를 얻을하고 ScopeAware을 구현할 수 있습니다 거의 :)하지만 단 하나의 방식으로 만 작동합니다.

my_form.dart에서 속성을 초기화하면 my_form.html의 값이 바인드되고 마지막으로 range 구성 요소가 init 시간에 값을 사용할 수 있습니다.

하지만 구성 요소 내부의 코드를 변경할 때 값이 my_form.dart 여기

에 더 이상 바인더 제본되지는

my_form을 변경하지 않은 코드

range.html입니다 .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'은 단지 리터럴 값을 묶는 것이다. –

파서 오류 : 예상치 못한 토큰 {, 예상 식별자, 키워드 또는 문자열이 {{{v1}}]의열 2에 있지만 {{}}없이 작동합니다. 바인딩이 필요하다고 생각 했나요? – BenNG

좋아요. NgAttr, (at) NgOneWay, (at) NgTwoWay가 DOM 속성을 가진 인스턴스 속성을 바인드하는 것을 보았습니다 ... cool thx :) – BenNG

구성 요소에서 값을 검색하는 방법

답변

관련 문제