什麼是從子控制器訪問父控制器成員的優雅方式？

我在我的應用程序中使用controllerAs語法，我想從子控制器訪問父控制器的函數，我知道這是可以通過注入$ scope來實現的，但是考慮到Angular已經試圖很難從代碼中擺脫$ scope， '想知道是否有一個更優雅的方式做到這一點，而不注入$ scope？什麼是從子控制器訪問父控制器成員的優雅方式？

下面是HTML的例子：

<div ng-controller="AppCtrl as app"> 
    <div ng-controller="ChildCtrl as child"> 
    </div> 
</div>

和相應的控制器：

angular.module('test').controller('AppCtrl', function() { 
    var vm = this; 
    vm.log = function() { 
    console.log("Output"); 
    } 
} 

angular.module('test').controller('ChildCtrl', function() { 
    var vm = this; 
    // Here I want to access parent's log() function 
}

我知道我可以注入$範圍，然後通過$scope.app.log()訪問日誌功能，但有一個bettter方式無需注入即可訪問日誌$scope?

來源

2016-08-17 doranT

[從子控制器angularjs訪問父作用域（的可能的複製http://stackoverflow.com/questions/21453697/angularjs-access-parent-scope -from-child-controller） – Ted

一種選擇是使用Angular 1.5組件（docs）。

它看起來像這樣的子組件：

.component('childComponent', { 
    require: { 
    parentCtrl: '^ parentCtrl' 
    } 
    controller: function() { 
    this.parentCtrl.anyMethod(); //here we are accessing parent's controller properties 
    } 

    ... 

});

來源

2016-08-17 18:29:12 oKonyk

重新鏈接似乎破裂。 – didierc

好吧，你想鏈接到我想的文檔示例... – didierc

這個答案被張貼6個月左右有人問後，但我認爲這可能是有益的其他旅客檢查我提出的解決方案下面。

角控制器具有原型繼承，這意味着子控制器的$scope對象可以訪問。如果您沒有將您的屬性和方法綁定到$scope，而是使用this關鍵字和controller as語法，則子女的$scope將無法直接訪問父母的成員，但仍然可以通過$scope.$parent訪問它們。

這就是說，有兩種可能的（清潔和簡單）的方法來解決你的問題：

1）你可以綁定的屬性和方法，你的父母控制器的$scope對象，必須通過$scope直接訪問它們在任何子控制器中（如果需要，可以覆蓋屬性/方法 - 就像您在常規Class上那樣）。所以，如果你的父母控制器上定義

$scope.log = function() { console.log("output") }

，你的孩子控制器具有通過簡單地調用$scope.log()訪問它。 Check this fiddle。

2）或者，由於您使用的是this關鍵字和controller as語法來綁定控制器的意見，孩子的$scope對象不會對父的屬性和方法的直接訪問，因爲這些都不是父母的$scope成員但是this，父控制器本身的實例。在這種情況下，您應該通過$scope.$parent訪問父級。除此之外，「app」（您爲「AppCtrl」創建的別名，即該控制器本身的實例）將是$scope.$parent的一個屬性。由於您將「日誌」方法定義爲控制器本身的成員，而不是其對象，因此「日誌」是「應用程序」的成員，您的子控制器可以訪問父級的「日誌」方法，如下所示：$scope.$parent.app.log()。Check this fiddle

下面是一些關於這個論題進一步閱讀：https://github.com/angular/angular.js/wiki/Understanding-Scopes

來源

2017-02-21 21:18:37

什麼是從子控制器訪問父控制器成員的優雅方式？

回答

相關問題