Question

我有一个执行任务的组件，但后来需要刷新数据（可以从控制器调用的方法）。

是否可以从组件访问控制器方法和属性？

是否可以通过Scope获取？父/根范围？

（还注意到我正在使用一个很愿意访问父范围的指令）

Answer 1

我使用了$ broadcast ...不确定这是不是这样做的正确方法。我想从组件/指令尝试访问控制器是循环的？那么也许$ broadcast就是我想要的？

...对于方法来说，我猜...但我确实觉得我应该能从控制器获得一个属性。如果我看不到父范围，我一定是做错了...

Answer 2

您必须在父级上设置可见性，然后您可以将父级注入子级。（我只是在我的手机和有限的可能性）AFAIK SO已经有一个问题+答案。

Answer 3

听起来你有一个控制器和一个组件，它是控制器的子元素。在这种情况下，您可以在组件的构造函数中注入控制器：

@NgController(...)
class MyController {
  refresh() {
    ...
  }
}

@NgComponent(...)
class MyComponent {
  MyController _myController;

  MyComponent(MyController this._myController);

  doSomething() {
    _myController.refresh();
  }
}

Answer 4

组件基本上应该是可重用的，因此不应该对调用控制器有任何引用。这是一个解决方案，其中两个独立的控制器使用一个组件来修改控制器的属性。我不确定我是否正确使用了手表功能，还是有更好的方法来做到这一点。想法来自这个问题和答案： AngularDart components and model binding

编辑：操作，抱歉：一个控制器和两个不同的属性。

ang_testi.dart：

import 'package:angular/angular.dart';
import 'package:di/di.dart';

@NgComponent(
 selector: 'my-component'
)
class MyComponent {
  NgModel _ngModel;
  Scope _scope;

  MyComponent(this._ngModel, this._scope){
    _scope.$watch(() => _ngModel.modelValue, (value) => onC(value));
  }

  onC(value){
    if(value!=null) _ngModel.modelValue=value.toUpperCase(); 

    return _ngModel.modelValue;
  }
}


@NgController(
    selector: '[main-test]',
    publishAs: 'ctrl')
class MainTestController {
  String msg;
  String msg2;
  Scope _scope;
  MainTestController(this._scope){
    _scope.$watch(() => msg, (value) => onMsgC(value));
  }

  onMsgC(value){
    print("msg change:$value");
  }

}

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 ng-model="ctrl.msg"></my-component> 
    <my-component ng-model="ctrl.msg2"></my-component> 

    <p><input type="text" ng-model="ctrl.msg"></p>
    <p>Hello world from {{ctrl.msg}}!</p>
    <p><input type="text" ng-model="ctrl.msg2"></p>
    <p>Hello world from {{ctrl.msg2}}!</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>

Answer 5

如果我污染了这个帖子，我很抱歉。

我找到了一种更简单的方法来创建一个组件，它可以操纵调用控制器中的数据。在下面的示例中，@ NgComponent将字符串从调用控制器转换为大写，并保留双向绑定。

保留绑定的关键是使用类型的变量：List，Map或Class（我相信Set和Queue也可以）。对于这些类型，Dart使用“指针”，而不是值（如果条款不正确则抱歉）。

正确类型的变量也使得代码工作正常（如果您使用例如类型：String，绑定不起作用）：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>

从组件和/或指令访问控制器方法？

5 个答案: