在 Angularjs 中使用 Factory 从一个控制器调用函数到另一个控制器

Question

我想在 angularjs 中使用工厂方法从一个控制器调用函数到另一个控制器下面是我使用的代码

var Inciapp = angular.module('IncidentApp', []);

Inciapp.controller('GetAlphabetical', function ($scope, CustomerFactory) {
    $scope.Customer = null;
    CustomerFactory.getCustomers().then(function (successResponse) {
        $scope.Customer = successResponse.data; // please check the request response if list id in data object 
    }, function (errorResponse) {
        throw error;
    })
});

Inciapp.factory('CustomerFactory',function ($http) {
    var _factory = {};
    _factory.getCustomers = function () {
        return $http.get('@Url.Content("~/Home/GetIncidentlist")');
    };
    return _factory;
});

HTML :

 <div data-ng-app="IncidentApp">
    <div data-ng-controller="GetAlphabetical">
        <table>
            <thead>
                <tr>
                    <th>IncidentID</th>

                </tr>
            </thead>
            <tfoot>
                <tr ng-repeat="h in Customer">
                    <td>{{ h.Name }}</td>

                </tr>
            </tfoot>
        </table>
    </div>

</div>
<div data-ng-controller="GetAlphabeticalSecond">
        <table>
            <thead>
                <tr>
                    <th>IncidentID</th>

                </tr>
            </thead>
            <tfoot>
                <tr ng-repeat="h in Customer">
                    <td>{{ h.Name }}</td>

                </tr>
            </tfoot>
        </table>
    </div>

C#:

 List<incident> lst = new List<incident>();
        lst.Add(new incident { ID = "123", contact = "98765", IDcontact = "456", IDnumber = "7866", Name = "Nayeem", NameID = "3333", number = "987654321", Phone = "1234567890" });
        lst.Add(new incident { ID = "123", contact = "98765", IDcontact = "456", IDnumber = "7866", Name = "Nayeem", NameID = "3333", number = "987654321", Phone = "1234567890" });
        lst.Add(new incident { ID = "123", contact = "98765", IDcontact = "456", IDnumber = "7866", Name = "Nayeem", NameID = "3333", number = "987654321", Phone = "1234567890" });
        lst.Add(new incident { ID = "123", contact = "98765", IDcontact = "456", IDnumber = "7866", Name = "Nayeem", NameID = "3333", number = "987654321", Phone = "1234567890" });
        lst.Add(new incident { ID = "123", contact = "98765", IDcontact = "456", IDnumber = "7866", Name = "Nayeem", NameID = "3333", number = "987654321", Phone = "1234567890" });
        lst.Add(new incident { ID = "123", contact = "98765", IDcontact = "456", IDnumber = "7866", Name = "Nayeem", NameID = "3333", number = "987654321", Phone = "1234567890" });
        lst.Add(new incident { ID = "123", contact = "98765", IDcontact = "456", IDnumber = "7866", Name = "Nayeem", NameID = "3333", number = "987654321", Phone = "1234567890" });
        lst.Add(new incident { ID = "123", contact = "98765", IDcontact = "456", IDnumber = "7866", Name = "Nayeem", NameID = "3333", number = "987654321", Phone = "1234567890" });
        lst.Add(new incident { ID = "123", contact = "98765", IDcontact = "456", IDnumber = "7866", Name = "Nayeem", NameID = "3333", number = "987654321", Phone = "1234567890" });
        return Json(lst, JsonRequestBehavior.AllowGet);

Answer 1

您的控制器超出了应用程序的范围。

包围 ng-controller 的 div 应该在包围 ng-app 的 div 内。

Answer 2

已更新视图文件

   <div data-ng-app="IncidentApp">
      <!-- angular IncidentApp scope starts from here -->

      <div data-ng-controller="GetAlphabetical">
        <table>
          <thead>
            <tr>
              <th>IncidentID</th>
            </tr>
          </thead>
          <tfoot>
            <tr ng-repeat="h in Customer">
              <td>{{ h.Name }}</td>
            </tr>
          </tfoot>
        </table>
      </div>

    <div data-ng-controller="GetAlphabeticalSecond">
      <table>
        <thead>
          <tr>
            <th>IncidentID</th>
          </tr>
        </thead>
        <tfoot>
          <tr ng-repeat="h in Customer">
            <td>{{ h.Name }}</td>
          </tr>
        </tfoot>
      </table>
    </div>

   <!-- angular IncidentApp scope ends from here --> 
  </div>

Angular stuff only works if they comes in application scope. In your case GetAlphabetical is in application scope but second controller were out of scope. i have updated the HTML view to fix your issue.

在 Angularjs 中使用 Factory 从一个控制器调用函数到另一个控制器

Call function from one controller to another controller using Factory in Angularjs

asp.net-mvc

jquery

angularjs

angular-services