Access controller method from component and/or dir

2019-05-18 09:39发布

站内问答 / 后端开发
1602 5 6

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)

5条回答
爱情/是我丢掉的垃圾
2楼-- · 2019-05-18 09:47

You have to set the visibility on the parent then you can inject the parent to the child. (I'm only on my phone and limited possibilities) AFAIK SO has a question+answer already.

查看更多
0人赞 添加讨论(0) 举报
等我变得足够好
3楼-- · 2019-05-18 09:48

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>
查看更多
0人赞 添加讨论(0) 举报
Lonely孤独者°
4楼-- · 2019-05-18 10:01

Components should basically be reusable and therefore shouldn't have any reference to the calling controller. Here is one solution where two separate controllers use one component to modify controller's property. I'm not sure have I used watch-function properly or is there better way to do this. Idea comes from this question and answers: AngularDart components and model binding

edit: ops, sorry: One controller and two different properties.

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>
查看更多
0人赞 添加讨论(0) 举报
神经病院院长
5楼-- · 2019-05-18 10:05

I used $broadcast ... Not sure if that's the proper way to do it or not. I imagine trying to access the controller from component/directive is circular? So maybe $broadcast is what I want?

...For methods it makes sense I guess...But I do feel like I should be able to get a property from the controller. I must be doing something wrong if I can't see the parent scope...

查看更多
0人赞 添加讨论(0) 举报
时光不老，我们不散
6楼-- · 2019-05-18 10:12

It sounds like you have one controller and one component which is a child element of the controller. In this case you can inject the controller in the component's constructor:

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

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

  MyComponent(MyController this._myController);

  doSomething() {
    _myController.refresh();
  }
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)