从angular js中的另一个ng应用程序调用方法

Call method from another ng-app in angular js

本文关键字：ng 应用程序 调用 方法 另一个 angular js      更新时间：2024-07-01

我在同一页面上有2ng应用程序块。一个用于列出项目，另一个用于插入。我想在完成插入后调用listing函数。我尝试过一些东西，但没能成功。我在同一个ng应用程序上找到了一些关于调用函数的文档，但我需要从另一个ng程序调用函数。

这是我的代码，请帮忙。

<body>
<div id="UserControllerDiv" ng-app="UserTableApp" ng-controller="UsersController" class="form-group">
    <br /><br />
    <p>Search : <input type="text" ng-model="search" /></p>
    <table class="table table-hover">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Middle Name</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="u in users | filter:search">
                <td>{{ u.FirstName }} </td>
                <td>{{ u.MiddleName }} </td>
            </tr>
        </tbody>
    </table>
</div>
<br />
<div id="UserFormDiv" ng-app="UserFormApp" ng-controller="UserFormCtr" class="form-group">
    <table class="form-group">
        <tr>
            <td>First Name</td>
            <td> : </td>
            <td><input type="text" ng-model="FirstName" class="" /> </td>
        </tr>
        <tr>
            <td>Middle Name</td>
            <td> : </td>
            <td><input type="text" ng-model="MiddleName" /> </td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td>
                <button ng-click="submit()">Save</button>
            </td>
        </tr>
    </table>
</div>
<script>
    var userTableApp = angular.module("UserTableApp", []);
    userTableApp.controller("UsersController",
        function UsersController($scope, $http) {
            $http.get("http://localhost:10160/UserService/Users")
            .success(function (response) { $scope.users = response; });
        });
    var userFormApp = angular.module("UserFormApp", []);
    userFormApp.controller("UserFormCtr",
        function UserFormCtr($scope, $http) {
            $scope.submit = function () {
                var dataObj = {
                    FirstName: $scope.FirstName,
                    MiddleName: $scope.MiddleName
                };
                var res = $http.post("http://localhost:10160/UserService/AddUser", dataObj);
                res.success(function (data, status, headers, config) {
                    /****** Here I want to call the UsersController function of UserTableApp  ************/
                    /* I tried the code below but it did not work */
                    var scope = angular.element(document.getElementById("UserControllerDiv")).scope();
                    scope.$apply(function () { scope.UsersController($scope, $http); });
                    /*************************************************************************************/
                });
                res.error(function (data, status, headers, config) {
                    alert("failure message: " + JSON.stringify({ data: data }));
                });
            }
        });
    angular.bootstrap(document.getElementById("UserFormDiv"), ['UserFormApp']);
</script>

谢谢你的帮助。。。

以下是如何从其他控制器应用程序调用函数。

 var scope = angular.element(document.getElementById("UserControllerDiv")).scope();
                scope.yourfunctionName();

流程将转到上述函数。为了保证您可以在控制台的作用域对象中检查方法的存在性。你说得对。

相关文章：