使用Angularjs中的Factory从一个控制器调用另一个控制器的功能

时间:2015-08-22 05:15:32

标签: jquery asp.net-mvc angularjs angular-services

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

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

2 个答案:

答案 0 :(得分:1)

您的控制器不在应用范围内。

包含ng-controller的div应位于包含ng-app的div内。

答案 1 :(得分: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视图以解决您的问题。