Метод контроллера доступа из компонента и / или директивы?

У меня есть компонент, который выполняет задачу, но затем необходимо обновить данные (метод, вызываемый из контроллера).

Можно ли получить доступ к методам и свойствам контроллера из компонента?

Это доступно через Scope? Родительская / корневая область?

(Также заметил, что я использую директиву, которая хотела бы получить доступ к родительской области)

Источник

5 ответов

Я использовал $broadcast ... Не уверен, что это правильный способ сделать это или нет. Я представляю, пытаясь получить доступ к контроллеру из компонента / директива является круговой? Так что, возможно, $ трансляция - это то, что я хочу?

... Для методов это имеет смысл, я думаю... Но я чувствую, что должен иметь возможность получить свойство из контроллера. Должно быть, я что-то делаю не так, если не вижу родительской области видимости...

Источник

Вы должны установить видимость на родителя, а затем вы можете ввести родителя для ребенка. (Я только на своем телефоне и ограниченные возможности) У AFAIK SO уже есть вопрос + ответ.

Источник

Похоже, у вас есть один контроллер и один компонент, который является дочерним элементом контроллера. В этом случае вы можете вставить контроллер в конструктор компонента:

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

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

  MyComponent(MyController this._myController);

  doSomething() {
    _myController.refresh();
  }
}
Источник

Извините, если я загрязняю эту тему.

Я нашел гораздо более простой способ создания компонента, который может манипулировать данными в вызывающем контроллере. В следующем примере @NgComponent преобразует строку из вызывающего контроллера в верхний регистр и сохраняет двухстороннюю привязку.

Ключом к сохранению привязки является использование переменной типа: List, Map или Class (я также считаю, что Set и Queue будут работать). С этими типами Dart использует "указатели", а не значения (извините, если термины не верны).

Правильный тип переменной также делает следующий код работоспособным (если вы используете, например, type: 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>
Источник

Компоненты должны в основном быть повторно используемыми и поэтому не должны иметь никаких ссылок на вызывающий контроллер. Вот одно решение, в котором два отдельных контроллера используют один компонент для изменения свойства контроллера. Я не уверен, что правильно использовал функцию часов или есть лучший способ сделать это. Идея исходит из этого вопроса и ответов: компоненты AngularDart и привязка модели

редактировать: ops, извините: один контроллер и два разных свойства.

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>
Источник
Другие вопросы по тегам