Вызов метода контроллера в родительском модуле из дочернего модуля в Angular

Я пытаюсь включить загрузку файла в свой проект, вот моя часть html

 <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>

мой контроллер

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
    });
};
});

HTML-файл для загрузки находится внутри моего основного модуля myApp

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

когда я запускаю файл, контроллер загрузки файла показывает ошибку http://errors.angularjs.org/1.5.0-beta.2/ng/areq?p0=MyCtrl&p1=not%20aNaNunction%2C%20got%20undefined при ошибке (родные)

Заранее спасибо


person user3769694    schedule 20.02.2016    source источник
comment
вы можете создать его здесь jsfiddle.net   -  person Anik Islam Abhi    schedule 20.02.2016
comment
У вас может не быть нескольких ng-приложений на одной странице. Единственный. Удалите ng-app из формы и убедитесь, что модуль myApp имеет зависимость от модуля fileUpload.   -  person JB Nizet    schedule 20.02.2016
comment
@AnikIslamAbhi на самом деле это небольшая часть моего проекта, и я очень новичок в angular js, настоящая проблема в том, что я не могу получить контроллер myCntrl в своем основном приложении myApp. я застрял там на последнюю неделю   -  person user3769694    schedule 20.02.2016
comment
@JBNizet, когда я это сделал, я не могу перенаправить на страницу загрузки файла. В консоли также нет ошибки   -  person user3769694    schedule 20.02.2016


Ответы (1)


У вас не должно быть другого объявления ng-app на той же странице, если вы хотите, чтобы эти контроллеры были частью ОДНОГО одного и того же приложения - удалите это ng-app="fileUpload" . Тогда у вас будет такая структура в вашем HTML:

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

Таким образом, вы можете вызывать MyController функции из MyCtrl, используя $scope.$parent, подробнее читайте здесь: Родитель доступа AngularJS область от дочернего контроллера

person shershen    schedule 20.02.2016
comment
Когда я делаю всю эту маршрутизацию в моем проекте, она не работает, поэтому я даже не могу перейти на страницу загрузки файла. Есть идеи, почему это происходит? а так же нет ошибки в консоли - person user3769694; 20.02.2016
comment
plnkr.co/edit/E71JQBQm42oAp5W7itkt?p=info я не могу включить весь проект, его слишком большой ... есть панель навигации, и оттуда я нажимаю «Загрузить файл» - person user3769694; 20.02.2016
comment
эти две «панели навигации» и форма загрузки находятся на двух разных html-страницах? - person shershen; 20.02.2016
comment
Он должен быть на одном! Одна и единственная html-страница/файл. Это все, что касается Angular — SPA = одностраничное приложение. Если эти контроллеры «MyController» и «MyCtrl as up» находятся в двух физически разных html-файлах, они никогда не смогут общаться или работать вместе! Попробуйте прочитать что-то вроде этого - scotch.io/tutorials/ - person shershen; 20.02.2016