Angular 1.5，從父控制器調用組件中的函數

Angular 1.5組件很容易允許創建從組件向父級的回調。有沒有一種方法可以從父級控制器中的函數調用組件中的函數？Angular 1.5，從父控制器調用組件中的函數

可以說我的組件稱爲task-runner，下面是它在父容器中的HTML。

<task-runner taskcategogyid=5></task-runner> 

<button type="button" ng-click="doSomethingInParent()">ParentToChildButton</button>

該plunkr是here。我希望當單擊ParentToChildButton時，函數doSomethingInParent（）將調用組件中的remotefunc。

來源

2016-05-13 TkNeo

請添加組件定義。 – alphapilgrim

Components = https://docs.angularjs.org/guide/component – TkNeo

不，我的意思是你的代碼，你的組件。不是什麼組件的定義。實際的JS部分。 – alphapilgrim

幾種不同的方式：

傳遞對象作爲一個屬性與雙向綁定（scope:{myattr:'='}）到任務項報頭指示該指令可以再加入一個函數來對父控制器打電話。
設置一個屬性，該屬性上有單向綁定（scope:{myattr:'@'}），然後attrs.$observe更改爲觸發動作，或雙向綁定（scope:{myattr:'='}），然後$scope.$watch更改爲觸發動作。
讓指令引發一個事件（scope:{raiseLoaded:'&onLoaded'}），該事件傳遞一個表示遠程控制對象的對象，並在其上面觸發一個觸發所需操作的方法。要舉辦活動，您可以在指令中調用類似raiseLoaded({remoteControl: remoteControlObj})的內容，然後聆聽活動，假設您的父級控制器上有setRemote()方法，則使用<task-item-header on-loaded="setRemote(remoteControl)">。

更新我才意識到你的問題是爲AngularJS的較新版本，所以我不知道如果我的回答仍然適用。我現在就把它留在這裏，但如果你發現它沒有幫助，我可以刪除它。

來源

2016-05-13 17:11:48 adam0101

您能否詳細說明＃3？它不清楚父母（組件容器）中設置了哪些屬性以及組件中設置了哪些屬性？我在原始帖子中添加了一個plunkr。我希望當我點擊parenttochildbutton組件中的remotefunc（）時，會使用alert（5） – TkNeo

調用您可以將其刪除，因爲它可能導致人們認爲它已經得到了答案。 – TkNeo

@TkNeo，我修改了你的plunkr，就像我在＃3中所描述的那樣：http://plnkr.co/edit/vRVZB9EhhZd4sYTGoPvC?p=info – adam0101

我以前需要這樣的東西，所以我想我會分享我是如何解決這個問題的。

與OP類似，我需要免費觸發父組件中子組件的方法。我希望能夠在不使用$ onChanges生命週期鉤子的情況下自由/單獨地在父級中觸發此方法。

相反，我創建了一個通知註冊機制，允許子組件在加載時向父節點「註冊」方法。這個方法可以由$ onChanges週期外的父級自由觸發。

我創建了一個codepen來演示這一點。它可以很容易地擴展爲處理來自父級的與數據更改無關的不同類型的通知。

的Index.html

<div ng-app="tester"> 
    <parent></parent> 
</div>

的script.js

angular.module('tester', []); 

angular.module('tester').component('parent', { 
    controller: parentController, 
    template: ` 
    <div class="tester-style"> 
     <button ng-click="$ctrl.notifyChild()">Notify child</button> 
     <child parent-to-child-notification-registration="$ctrl.childComponentNotificationRegistration(handler)"> 
    </div> 
    ` 
}); 

function parentController() { 
    let childComponentEventHandler = null; 

    this.$onInit = function() { 
    this.value = 0; 
    }; 

    this.childComponentNotificationRegistration = function(handler) { 
    childComponentEventHandler = handler; 
    console.log('Child component registered.'); 
    }; 

    this.notifyChild = function() { 
    if (childComponentEventHandler) { 
     childComponentEventHandler(this.value++); 
    } 
    }; 
} 

angular.module('tester').component('child', { 
    bindings: { 
    parentToChildNotificationRegistration: '&', 
    }, 
    controller: childController, 
    template: ` 
    <div class="tester-style"> 
     <h4>Child Component</h4> 
    </div> 
    ` 
}); 

function childController() { 
    this.$onInit = function() { 
    this.parentToChildNotificationRegistration({ 
     handler: this.processParentNotification 
    }); 
    }; 

    this.processParentNotification= function(parentValue) { 
    console.log('Parent triggered child notification handler!!!'); 
    console.log('Value passed to handler:', parentValue); 
    }; 
};

}

也爲類似@adam0101的＃3回答的東西看codepen。

來源

2018-01-08 15:52:46 rdrw

優秀的方法！工作正常。謝謝。 – user2549726

Angular 1.5，從父控制器調用組件中的函數

回答

相關問題