从控制器调用AngularJS 1.5组件的方法? [英] Call AngularJS 1.5 component's method from the controller?

问题描述

我有这样的组件插入我的主页

I have component plugged into my main page like this

<rs-dropdown></rs-dropdown>

该组件被定义为RsDropdownComponent类，其中引用了RsDropdownController，这是常见的东西...

The component is defined as RsDropdownComponent class with a reference to RsDropdownController, the usual stuff...

该组件具有$ onInit()事件处理程序，该事件处理程序调用某些数据存储区以用一些数据填充该组件，一旦初始化该组件，就会触发此事件.

The component has $onInit() event handler that calls some datastore to populate the component with some data, this event is fired once the component is initialized.

问题是我不希望组件开始在onInit()事件中加载数据.

The problem is that I dont want the component to start loading data onInit() event.

我希望能够在需要时从控制器中调用组件的方法.

I want to be able to call the component's method from my controller when I want to.

基本上，我需要以某种方式从控制器访问Component的实例并调用其load函数.

Basically I need somehow to access the instance of the Component from my controller and call it's load function.

有可能吗?

推荐答案

使用ng-if已经提到过，如果可能的话，使子组件更宽容异步输入总是一种更好的方法，但是您可以做很多事情做.

Someone already mentioned using ng-if, that or making your child component more lenient to asynchronous inputs is always a better approach if possible, but there's many things you can do.

1-您始终可以使用事件，创建具有以下签名的简单事件服务:

1 - You can always use eventing, create a simple event service with signatures like:

service.registerEventHandler(id, function)
service.unregisterEventHandler(id, function)
service.sendEvent(id)

在子级中注册处理程序，并在就绪时从父级触发事件

Register a handler in the child, and fire the event from parent when ready

2-使用2向绑定的黑暗魔法. 在子组件中指定

2 - dark magic using 2-way bindings. In child component specify

bindings: {
  darkMagic: '='
},
controller: function() {
  this.$onInit = function() {
    darkMagic = function() { 
          // data ready
    };
    ...

然后从父模板<child data-dark-magic="$ctrl.placeholder">.... 然后在父控制器中，在编译之后，在摘要循环后进行后链接之后……您可以调用this.placeholder();来执行子代中定义的功能.

Then from parent template <child data-dark-magic="$ctrl.placeholder">.... Then in parent controller, after compile, after postlink after digest cycle... you can call this.placeholder(); to execute the function defined in the child.

3-您可以对onChanges使用单向绑定来切换状态

3 - you can use one-way binding with onChanges to toggle state

  controller: function() { 
    this.ready = false; // should use onInit but saving lines
    this.$onchanges = function(changesObj) {
        if (changesObj.isReadyProperty) {
            this.ready = changesObj.isReadyProperty.currentValue;
        }
    }
  },
  bindings: {
    isReadyProperty: '<',
  }

然后从父母那里获得<child is-ready-property="$ctrl.imready">... 只需在加载数据时在控制器中将即时就绪切换为true.

Then from parent you have <child is-ready-property="$ctrl.imready">... And just toggle imready to true in controller when data is loaded.

在某些情况下，子级始终位于父级之下，这是一个很好的例子，它是一个tabset组件和一个tab组件.在这种情况下，子(标签)组件可能需要使用标签集控制器，并使用在那里定义的API.

There is also the case when the child is ALWAYS under the parent, good example of this is a tabset component and tab components. In this case the child (tab) component can require the tabset controller, and use the API defined there.

或者您甚至可以使用服务进行通信，将服务注入两个组件中，并以这种方式维护状态.请记住此解决方案，尽管要使用工厂模式，而不要在有角度的配方中保持状态.

Or you could even use a service for communication, inject the service into both components, and maintain state that way. Keep in mind with this solutions though to use factory patterns and not maintain state in angular recipes.

我敢肯定还有更多的方法，但这确实取决于您的用例.

I'm sure there's even many more ways, but it really depends on your use-case.

我仍然更喜欢使您的组件更宽大一些，以便在收到数据之前优雅地处理无数据情况.

I still prefer to just make your component more lenient to handle the no data case gracefully until it receives something.

欢呼

这篇关于从控制器调用AngularJS 1.5组件的方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！