0

I have two controllers like this

<div ng-controller="ParentController">
    <div ng-controller="ChildController">
    ... my grid table ..
    </div>
</div>

js code

function ParentController($scope) {
 ...
 $scope.refreshBtnClicked = function() {
    //here I want to call refreshGrid method of ChildController
 }
}
function ChildController($scope) {
 ...
 $scope.refreshGrid = function() {
 ... its using some inner variables of Child controller...
 }
}

How can I call it?

FarazShuja
  • 2,287
  • 2
  • 23
  • 34

3 Answers3

1

Try this way, you will have to implement your service function but that's basically grid stuff.

<div ng-controller="ParentController">
    <div ng-controller="ChildController">
    ... my grid table ..
    </div>
</div>

function ParentController($scope, gridService) {
 ...
 $scope.refreshBtnClicked = gridService.refresh();
}
function ChildController($scope, gridService) {
 ...
 do whatever you like with your gridService methods or properties.
}

your factory or service 
angular.module('myApp')
  .service('Gridservice', function Gridservice() {
    //data and methods here
  });

you can also use broadcast or emit to trigger events, between controllers. like if you refresh, also your childcontroller data gets updated.

z.a.
  • 2,549
  • 3
  • 12
  • 16
  • exactly so you create a factory and keep all your data and methods there, then share it around. – z.a. Apr 29 '14 at 18:43
  • I hope that will work. will check and let u know... thx a lot – FarazShuja Apr 29 '14 at 18:46
  • of course. just make sure your data is contained in the factory and also your methods, as it's an independent object. – z.a. Apr 29 '14 at 18:47
  • 1
    Ok Found this solution the perfect one in my case http://stackoverflow.com/questions/19038778/angularjs-how-to-call-child-scope-function-in-parent-scope – FarazShuja Apr 30 '14 at 06:01
0

With directives, you can "register" the child controller or scope in the parent. Something like this:

app.directive('parent', function(){
    controller: function(){
        this.children = [];
        this.addChild = function(childScope){
            this.children.push(childScope);
        }
        this.callChildFunc = function(childID){
            children[childID].someFunc();
        }
    };


})


app.directive('child', function(){
    require: '^parent',
    link: (scope, elem, attrs, parentCtrl) {
        parentCtrl.addChild(scope)  
        scope.someFunc = function(){};
    }
})

The child calls a function that adds a reference to its scope in the parent so it can call its functions. Another option would be to use $scope instead of this in the parent's controller and pass the addChild function to the child's scope using an isolate scope.

Mosho
  • 7,099
  • 3
  • 34
  • 51
0

Well, you would have to do these things the AngularJS way. If there is a method or idea you want to share across controllers, you should implement it as a factory or service. And then you can use emit or broadcast to simultaneously share this service between controllers.

Can one controller call another?

Community
  • 1
  • 1
z.a.
  • 2,549
  • 3
  • 12
  • 16
  • -1 Yes: that is the plain documentation and I can get such description every where on net... but I want the code snippet to map exactly on my situation – FarazShuja Apr 29 '14 at 18:26
  • ok, great. so tell me, how is your childcontroller connected to your gridtable? are you just displaying data on the gridtable from the controller? we can go from here. – z.a. Apr 29 '14 at 18:35
  • Yes childcontroller has a factory method from which it gets data and with the help of other inner scope variables it display it as a grid. – FarazShuja Apr 29 '14 at 18:40
  • you can totally abstract this data & methods to a singleton factory service then. and then pass it around functions or controllers. – z.a. Apr 29 '14 at 18:41