从Angular JS中另一个ng-app调用方法

Question

I have 2 ng-app block on same page. 我在同一页面上有2个ng-app块。 One for listing items, and the other one is for insert. 一个用于列出项目，另一个用于插入。 I want to call listing function after I have finished insert. 完成插入后，我想调用列表功能。 I have tried something but I couldn't succeeded in. I found some documents about calling functions on same ng-app but i need to call a function from another ng-app. 我已经尝试了一些方法，但未能成功。我找到了一些有关在同一个ng-app上调用函数的文档，但是我需要从另一个ng-app调用函数。

Here is my code, please help. 这是我的代码，请帮忙。

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

Thank you for all your help... 谢谢你的帮助...

Answer 1

Here is how you call function from other controller app. 这是您从其他控制器应用程序调用函数的方式。

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

And the flow will go to the Function mentioned. 流程将转到提到的功能。 For assurance you can check presence of your method in scope object in console. 为了确保您可以在控制台的作用域对象中检查您的方法是否存在。 You were just about right. 你说的没错。

从Angular JS中另一个ng-app调用方法

问题描述

1 个解决方案

解决方案1
0 2017-06-02 11:12:36

从Angular JS中另一个ng-app调用方法

问题描述

1 个解决方案

解决方案1 0 2017-06-02 11:12:36

解决方案1
0 2017-06-02 11:12:36