2016-02-20 7 views
1

Я пытаюсь включить загрузку файла в моем проекте вот мой 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 на ошибки (родной)

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

+0

вы можете производить его здесь http://jsfiddle.net –

+0

На одной странице может быть несколько ng-приложений. Единственный. Удалите ng-app из вашей формы и убедитесь, что модуль myApp имеет зависимость от модуля fileUpload. –

+0

@AnikIslamAbhi на самом деле это небольшая часть моего проекта, и я очень новичок в угловых js, реальная проблема в том, что я не могу получить контроллер myCntrl в своем основном приложении myApp.i, который застрял там в течение прошлой недели – user3769694

ответ

0

Вы не должны иметь другую 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 access parent scope from child controller

+0

Когда я делаю всю эту маршрутизацию в моем проекте, я не могу работать, поэтому я даже не могу перейти на страницу загрузки файла. любая идея, почему это происходит? а также нет ошибки в консоли – user3769694

+0

можете ли вы поместить всю демо на http://plnkr.co/? – shershen

+0

http://plnkr.co/edit/E71JQBQm42oAp5W7itkt?p=info Я не могу включить весь проект в свой чересчур большой ... есть панель навигации, а оттуда я нажимаю на загрузку файла – user3769694