从 Angular 中的子模块调用父模块中的控制器方法答案

【问题标题】：Call a controller method in a parent module from a child module in Angular从 Angular 中的子模块调用父模块中的控制器方法
【发布时间】：2016-02-20 13:31:25
【问题描述】：

我正在尝试在我的项目中包含文件上传这是我的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 在错误（本机）

提前致谢

【问题讨论】：

你能在这里制作吗jsfiddle.net
您可能不会在同一页面中拥有多个 ng-app。只有一个。从表单中删除 ng-app，并确保 myApp 模块依赖于 fileUpload 模块。
@AnikIslamAbhi 实际上这是我项目的一小部分，我对 angular js 很陌生，真正的问题是我无法在我的主应用程序 myApp.i 中获取控制器 myCntrl过去一周卡在那里
@JBNizet 当我这样做时，我无法重定向到我的文件上传页面。控制台中也没有错误

标签： angularjs angular-controller

【解决方案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>

因此您可以使用$scope.$parent 从MyCtrl 调用MyController 函数，在此处阅读更多信息：AngularJS access parent scope from child controller

【讨论】：

当我在我的项目中执行整个路由时，我什至无法进入文件上传页面。知道为什么会这样吗？并且控制台中也没有错误
plnkr.co/edit/E71JQBQm42oAp5W7itkt?p=info 我不能将整个项目包含在内，它太大了..有一个导航栏，我从那里点击文件上传
这两个“导航栏”和上传表单是在两个不同的 html 页面上吗？
应该是一个！一个也是唯一的 html 页面/文件。这就是 Angular 的全部内容 - SPA = 单页应用程序。如果这些控制器 'MyController' 和 'MyCtrl as up' - 位于两个物理上不同的 html 文件中，它们将永远无法通信或一起工作！尝试像这样阅读 - scotch.io/tutorials/…