Ist es möglich, eine Funktion des äußeren AngularJS-Controllers auf Seite aufzurufen?

Question

Lasst uns sagen Controller namens Kegel eine Funktion

function showAlert() { 
     alert("Hello, people!"); 
    } 

hat, und ich habe eine Situation, wie

<div id='parent' ng-controller='cOne'> 
     <span ng-click='cOne.showAlert()'>Click For Alert</span> 
    <div id='child' ng-controller='cTwo'> 
     <span ng-click='$parent.cOne.showAlert()'>Click For Parent Controller Alert </span> 
    </div> 
</div> 

unten

gezeigt

Kann ich nenne irgendwie die Funktion dieser Kegel-Controller aus dem „Kind“ div? Ich habe versucht, $ scope, $ rootScope und $ parent zu verwenden. Wie mache ich es richtig?

Answer 1

Sie müssen nur showAlert zu $scope von cOne Controller zuweisen, und vom Kind einfach über $parent anrufen.

angular.module('myApp', []) 
 
    .controller('cOne', function($scope) { 
 
     $scope.showAlert = function() { 
 
     alert('cOne alert'); 
 
     }; 
 
     }) 
 
    .controller('cTwo', function($scope) {});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="cOne"> 
 
    <span ng-click='showAlert()'>Click For Alert-1</span> 
 
    <div ng-controller="cTwo"> 
 
    <span ng-click='$parent.showAlert()'>Click For Alert-2</span> 
 
    </div> 
 
</div>

Answer 2

Sie sollten Ihre Funktion entweder an scope oder Controller-Instanz binden. Wenn es an Umfang gebunden ist

$scope.showAlert = function() { 
    alert("Hello, people!"); 
} 

können Sie es nennen wie

<span ng-click='$parent.showAlert()'>Click For Parent Controller Alert </span> 

Wenn Sie binden es Instanz an die Steuerung, werden Sie in der Lage sein, sie in einer Weise zu nennen, Sie habe gerade gepostet.