组件和/或指令的访问控制器方法？ [英] Access controller method from component and/or directive?
问题描述
我有一个执行任务的组件，但需要刷新数据（可从控制器调用的方法）。
可以访问控制器方法和属性？
它是否可以通过Scope使用？父/根范围？
（还注意到我使用的指令也很喜欢访问父范围）
对不起，如果我污染这个线程。
我发现一个更简单的方法来创建一个组件，它可以操纵调用控制器中的数据。在下面的示例中，@NgComponent将来自调用控制器的字符串转换为大写并保留两个绑定。
保留绑定的关键是使用类型为的变量：列表，地图或类（我相信设置和队列将工作）。有了这些类型Dart使用指针，而不是值（对不起，如果条款不正确）。
正确类型的变量也使下面的代码工作（如果你使用例如type：String，bindings不工作）： https://github.com/angular/angular.dart/issues/264
ang_testi.dart
package：angular / angular.dart';
import'package：di / di.dart';
@NgComponent（
selector：'my-component'
）
class MyComponent {
List _test;
@NgTwoWay（'test'）
set test（List list）{
_test = list;
}
List get test {
_test [0] = _ test [0] .toUpperCase（）;
return _test;
}
}
@NgController（
selector：'[main-test]'，
publishAs：'ctrl'）
MainTestController {
List msg = [];
List msg2 = [];
}
类MyAppModule extends Module {
MyAppModule（）{
type（MainTestController）;
type（MyComponent）;
}
}
void main（）{
ngBootstrap（module：new MyAppModule（））;
}
ang_testi.html
< pre class =lang-dart prettyprint-override>
<！DOCTYPE html>
< html ng-app>
< head>
< meta charset =utf-8>
< title> ng-model test< / title>
< link rel =stylesheethref =ang_testi.css>
< / head>
< body main-test>
< my-component test =ctrl.msg>< / my-component>
< my-component test =ctrl.msg2>< / my-component>
< p>< input type =textng-model =ctrl.msg [0]>< / p&
< p>来自{{ctrl.msg [0]}}的Hello世界！< / p>
< p>< input type =textng-model =ctrl.msg2 [0]>< / p&
< p>来自{{ctrl.msg2 [0]}}的Hello世界！< / p>
< script src =packages / shadow_dom / shadow_dom.min.js>< / script>
< script type =application / dartsrc =ang_testi.dart>< / script>
< script src =packages / browser / dart.js>< / script>
< / body>
< / html>
I have a component that performs a task, but then needs to refresh the data (a method callable from the controller).
Is it possible to access the controller methods and properties from a component?
Is it available through Scope? Parent/root scope?
(Also noticed I'm using a directive as well which would love to access the parent scope)
I'm sorry if I'm polluting this thread.
I found a much simpler way to create a component, which can manipulate data in the calling controller. In the following example the @NgComponent transforms the string from the calling controller to uppercase and preserves a twoway binding.
The key to preserve binding is to use the variable of type: List, Map or Class (I believe also Set and Queue will work). With these types Dart uses "pointers", not values (sorry if the terms are not correct).
The correct type of variable makes also following code work (if you use for example type: String, bindings are not working): https://github.com/angular/angular.dart/issues/264
ang_testi.dart
import 'package:angular/angular.dart';
import 'package:di/di.dart';
@NgComponent(
selector: 'my-component'
)
class MyComponent {
List _test;
@NgTwoWay('test')
set test(List list){
_test=list;
}
List get test{
_test[0]=_test[0].toUpperCase();
return _test;
}
}
@NgController(
selector: '[main-test]',
publishAs: 'ctrl')
class MainTestController {
List msg=[""];
List msg2=[""];
}
class MyAppModule extends Module {
MyAppModule() {
type(MainTestController);
type(MyComponent);
}
}
void main() {
ngBootstrap(module: new MyAppModule());
}
ang_testi.html
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>ng-model test</title>
<link rel="stylesheet" href="ang_testi.css">
</head>
<body main-test>
<my-component test="ctrl.msg"></my-component>
<my-component test="ctrl.msg2"></my-component>
<p><input type="text" ng-model="ctrl.msg[0]"></p>
<p>Hello world from {{ctrl.msg[0]}}!</p>
<p><input type="text" ng-model="ctrl.msg2[0]"></p>
<p>Hello world from {{ctrl.msg2[0]}}!</p>
<script src="packages/shadow_dom/shadow_dom.min.js"></script>
<script type="application/dart" src="ang_testi.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
这篇关于组件和/或指令的访问控制器方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
