从另一个控制器调用函数答案

【问题标题】：call a function from another another controller从另一个控制器调用函数
【发布时间】：2016-04-16 10:13:41
【问题描述】：

我有一个简单的应用程序，显示来自服务器的文件列表-上传文件-显示更新列表。我在不同的 div 下有两个控制器“上传”和“文件”。

我希望能够从文件中调用 loadData()，以便在上传后更新我的文件列表。

更新文档
app.controller('myCtrl1', 函数 ($scope,$http) {

$scope.fileupload=function()
{
$scope.loadData();
}
//load file list
$scope.loadData = function () {
$scope.fileslist = ["abc.abc", "cde.cde"];

}

});

HTML 更新

 <body ng-app="myapp" nng-controller="myCtrl1">
 <div>
        <div>
        <form id="upload-form" method="post" action="">
            <input type="file" name="file"/>
            <input type="submit" value="upload" class="button" ng-click="loadData()"/>
        </form>
        </div>
</div>

<div>
<div>
<form name="myForm">
    <ul>
        <li ng-repeat="fileslist in fileslist">
            <label>
                <input type="radio" ng-model="$parent.name" name="name" value="{{fileslist}}" required />{{fileslist}}
            </label>
        </li>
    </ul>
    <button ng-disabled="myForm.$invalid" class="button">Submit</button>

当我点击上传控制器中的按钮时，我只想运行 myCtrl1 控制器的“loadData()”函数

更新问题 - 我做了代码更改并合并了控制器，因为服务不会帮助我刷新控制器

所以现在的问题是我可以加载所需的数据，为什么 loadData() 但它会在一秒钟内消失......

【问题讨论】：

创建一个暴露 loadData 的服务，将服务注入两个控制器。

标签： angularjs angularjs-scope ng-controller

【解决方案1】：

您不能从控制器中的控制器调用方法。您需要提取方法，创建服务并调用它。这也将使代码彼此分离并使其更具可测试性

(function() {
angular.module('app', [])
    .service('svc', function() {
        var svc = {};

        svc.method = function() {
            alert(1);
        }

        return svc;
    })
    .controller('ctrl', [
        '$scope', 'svc', function($scope, svc) {
            svc.method();
        }
    ]);
})();

例如：http://plnkr.co/edit/FQnthYpxgxAiIJYa69hu?p=preview

完整参考请点击LINK1或LINK2

希望对你有所帮助。

【讨论】：

添加服务可以将数据从一个控制器获取到另一个控制器，但是......由于在另一个控制器中单击按钮，这不会帮助我刷新页面上的数据..（在列表中我不是即使在您的示例之后也能够找到使用服务的方法）

【解决方案2】：

您可以使用 $emit 和 $on 方法在两个控制器之间进行通信。

app.controller('first', ['$scope', '$rootScope',
    function($scope) {
       $rootScope.$on("CallMyMethod", function(){
          $scope.mymethod();
       });

       $scope.mymethod = function() {
           // your code goes here
       }
    }
]);
app.controller('second', ['$scope', '$rootScope',
    function($scope) {
       $scope.childmethod = function() {
           $rootScope.$emit("CallMyMethod", {});
       }
    }
]);

您可以在调用 $rootScope.$emit 时将数据发送到 mymethod。

【讨论】：

【解决方案3】：

您需要注入$controller 服务以在另一个控制器中实例化一个控制器。

    app.controller('TestCtrl2', ['$scope', '$controller', function ($scope, $controller) {
   var testCtrl1ViewModel = $scope.$new(); //You need to supply a scope while instantiating.
   //Provide the scope, you can also do $scope.$new(true) in order to create an isolated scope.
   //In this case it is the child scope of this scope.
   $controller('TestCtrl1',{$scope : testCtrl1ViewModel });
   testCtrl1ViewModel.myMethod(); //And call the method on the newScope.
}]);

在任何情况下，您都无法调用 TestCtrl1.myMethod()，因为您已将方法附加到 $scope 而不是控制器实例上。

如果您共享控制器，那么最好这样做：-

    .controller('TestCtrl1', ['$log', function ($log) {
     this.myMethod = function () {
     $log.debug("TestCtrl1 - myMethod");
    }
    }]);

【讨论】：