在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只有在應用程序范圍內時才起作用。 在您的情況下，GetAlphabetical在應用程序范圍內，但第二個控制器不在范圍內。 我已經更新了HTML視圖以解決您的問題。