how to get a connection to parent controller in angularjs?

Question

I have main controller ..In that I am using another controller.In the 2nd controller I am again using another controller.How to get a connection between first controller and 3rd controller in angularjs .!st is the main controller .And 2nd is for pop up on page load .And 3rd is for the control action of the pop up.CAn anyone solve this problem.

//mainform.js

var app=angular.module("myapp",['ngRoute','ngDialog','ngSanitize','addfrmapp','homeapp']);

app.controller("controller", ["$scope","ngDialog",function($scope,ngDialog){

    $scope.getname=function(){

        $scope.value=$("#fmname").val();

    };

    $scope.setname=function(){
        $("#fmname").val("");
    };

    $scope.inputhtml=function(){
    console.log("hi");
   };
}]);
app.config(function($routeProvider){
    $routeProvider.when("/Home",
            {
                templateUrl:"Htmlfiles/Home.html"

            })
        .when("/Add",
                {
                    templateUrl:"Htmlfiles/AddForm.html",
                    controller:"addform"
                })
        .when("/View",
                {
                    templateUrl:"Htmlfiles/ViewForm.html"
                });
        $routeProvider.otherwise({ 
            templateUrl:"Htmlfiles/Home.html"
        });
});

//addform.js

var app=angular.module("addfrmapp",['ngDialog']);
app.controller("addform",['$scope','ngDialog',function($scope,ngDialog){

    $scope.$parent.value="";
    ngDialog.open({

        template: 'Htmlfiles/formname.html',
        closeByEscape:false,
        closeByDocument:false,
        scope: $scope,
       showClose:false


    });
    $scope.savebtn=function(){

        if($("#fmname").val()=="")
            {
                alert("Form name must be given in the input box");
            }
        else{
            $scope.$parent.getname();
            ngDialog.closeAll();
        }
    };
    $scope.cancelbtn=function(){

                $scope.$parent.setname();

    };

    $scope.addtext=function(){


                ngDialog.open({
                    template:"popupfiles/textpopup.html",
                    closeByDocument:false,
                    closeByEscape:false,

                    controller:['$scope',function($scope){
                        $scope.expndtxt=function(){

                            $scope.$parent.inputhtml();
                        };
                    }]

                });
            };  
            $scope.addradio=function(){

                ngDialog.open({
                    template:"popupfiles/radiopopup.html",
                    closeByDocument:false,
                    closeByEscape:false,
                });

            };
            $scope.addcheckbox=function(){

                ngDialog.open({
                    template:"popupfiles/checkboxes.html",
                    closeByDocument:false,
                    closeByEscape:false,

                });

            };
            $scope.addsubmitbutton=function(){

                ngDialog.open({
                    template:"popupfiles/submitbuttons.html",
                    closeByDocument:false,
                    closeByEscape:false,

                });

            };


}]);

Now when i click on a button which goes to the function expndtext it going to the function but its not calling inputhtml() function which is in main js file.

Possible duplicate of [What's the correct way to communicate between controllers in AngularJS?](http://stackoverflow.com/questions/11252780/whats-the-correct-way-to-communicate-between-controllers-in-angularjs) — Shashank Agrawal, Oct 12 '15 at 06:20
yaa ..I have edited the question once can u plz look into it — Vindya Veer, Oct 12 '15 at 07:32

score 0 · Answer 1 · answered Oct 12 '15 at 06:16

0

Generally, angularjs services are used for implementing common functions and communication between different controllers. Read them up here.

answered Oct 12 '15 at 06:16

Tarun Dugar

8,921
8
42
79

score 0 · Answer 2 · answered Oct 12 '15 at 06:16

0

You can use $rootScope, it will be available estou all controllers.

You can also create function and the controllers accessing it. https://docs.angularjs.org/api/ng/service/$rootScope

answered Oct 12 '15 at 06:16

Alvaro Silvino

9,441
12
52
80

using $rootScope is a bad practice. it must be always avoided. – Ritt Oct 12 '15 at 07:32

score 0 · Answer 3 · answered Oct 12 '15 at 07:41

The best way to communicate between controllers is to create a common service and use it by injecting it in the controllers. It is preferred when there is no parent-child relationship between the controllers, you can use services as there is no parent-child relationship in your case.

The other way when there exists such relationship, then it works much more like inheritence, you can access parent objects and methods from the child controllers directly without using any services.

score 0 · Answer 4 · answered Oct 12 '15 at 08:01

You can try to broadcast an event in parent controller with data that you need to send to the other controller, and in second controller listen for that event and use the data from it. It can be done like this:

in first controller:

$rootScope.$broadcast('mydatachanged', $scope.myData);

in second controller:

$scope.$on('mydatachanged', function(event, myData) {
// do what you want to do with changed data
});

how to get a connection to parent controller in angularjs?

4 Answers4