在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

更新的视图文件

   <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 视图以解决您的问题。

Answer 2

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

封装 ng-controller 的 div 应该在封装 ng-app 的 div 内。