Call a controller method in a parent module from a child module in Angular

Question

I am trying to include a file upload in my project here is my html part

 <form ng-app="fileUpload" ng-controller="MyCtrl as up"     name="up.upload_form">
        Single Image with validations
    <input 
        type="file" 
        ngf-select 
        ng-model="up.file" 
        name="file" 
        ngf-pattern="'image/*'"
        accept="image/*" 
        ngf-max-size="20MB" 
        />
    Image thumbnail: <img style="width:100px;" ng-show="!!up.file" ngf-thumbnail="up.file || '/thumb.jpg'"/>
    <i ng-show="up.upload_form.file.$error.required">*required</i><br>
    <i ng-show="up.upload_form.file.$error.maxSize">File too large 
    {{up.file.size / 1000000|number:1}}MB: max 20M</i>
   <!--  Multiple files
    <div class="button" ngf-select ng-model="up.files" ngf-multiple="true">Select</div>
    Drop files: <div ngf-drop ng-model="up.files" class="drop-box">Drop</div> -->
    <button type="submit" ng-click="up.submit()">submit</button>
    <p>{{up.progress}}</p>
</form>

my controller is

angular.module('fileUpload', ['ngFileUpload'])
.controller('MyCtrl',function(Upload,$window){

var vm = this;
vm.submit = function(){ //function to call on form submit
    if (vm.upload_form.file.$valid && vm.file) { //check if from is valid
        vm.upload(vm.file); //call upload function
    }
};

vm.upload = function (file) {
    Upload.upload({
        url: 'http://localhost:3000/upload', //webAPI exposed to upload the file
        data:{file:file} //pass file as data, should be user ng-model
    }).then(function (resp) { //upload function returns a promise
        if(resp.data.error_code === 0){ //validate success
            $window.alert('Success ' + resp.config.data.file.name + 'uploaded. Response: ');
        } else {
            $window.alert('an error occured');
        }
    }, function (resp) { //catch error
        console.log('Error status: ' + resp.status);
        $window.alert('Error status: ' + resp.status);
    }, function (evt) { 
        console.log(evt);
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
        console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
        vm.progress = 'progress: ' + progressPercentage + '% '; // capture upload progress
    });
};
});

the file upload html is inside my main module myApp

<body ng-app="myApp" ng-controller="MyController">

when i run the file the file upload controller is showing error http://errors.angularjs.org/1.5.0-beta.2/ng/areq?p0=MyCtrl&p1=not%20aNaNunction%2C%20got%20undefined at Error (native)

Thanks in Advance

You may not have several ng-app in the same page. Only one. Remove ng-app from your form, and make sure the myApp module has a dependency on the fileUpload module. — JB Nizet, Feb 20 '16 at 13:44
@AnikIslamAbhi actually this is a small part of my project and i am very new to angular js ,the real problem is that i am not able to get the controller myCntrl in my main app myApp.i am stuck there for past one week — user3769694, Feb 20 '16 at 13:46
@JBNizet when i did that i am not able to redirect into my file upload page.there is no error in the console also — user3769694, Feb 20 '16 at 13:49

score 0 · Answer 1 · edited May 23 '17 at 10:28

0

You should not have another ng-app declaration on the same page if your want those controllers to be a part of ONE the same application - remove this ng-app="fileUpload" . Then you will have structure in your HTML like this:

<body ng-app="myApp" ng-controller="MyController">
  ..
  <form ng-controller="MyCtrl as up"name="up.upload_form">
  ..
  </form>
  ..
</body>

So you can call MyController functions from MyCtrl using $scope.$parent, read more here: AngularJS access parent scope from child controller

edited May 23 '17 at 10:28

Community

1
1

answered Feb 20 '16 at 14:41

shershen

9,875
11
39
60

When i do that whole routing in my project is not working so i cannot even go to the file upload page..any idea why this is happening? and also there is no error in the console – user3769694 Feb 20 '16 at 18:39
http://plnkr.co/edit/E71JQBQm42oAp5W7itkt?p=info i cannot include the whole project its way too big..there is a navigation bar and from there i click file upload – user3769694 Feb 20 '16 at 18:55
are those two 'navigation bar' and upload form are on two different html pages ? – shershen Feb 20 '16 at 19:26
It should be on one! One and the only html page/file. This is all the Angular is about - SPA = single page application. If those controllers 'MyController' and 'MyCtrl as up' - are in two physically different html files, they can never communcate or work together! Try read smth like this - https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating – shershen Feb 20 '16 at 19:34

Call a controller method in a parent module from a child module in Angular

1 Answers1