AngularJs 控制器不调用服务

Posted 2023-05-09

【中文标题】AngularJs 控制器不调用服务

【英文标题】：AngularJs Controller not calling the Service

【发布时间】：2017-10-11 17:36:49

【问题描述】：

我是 AngularJs 的新手，所以如果我问一些愚蠢的问题，请原谅。

我正在使用 angularSlideOutPanel 通过调用控制器“TeacherDetailsController”来填充弹出窗口。控制器 TeacherDetailsController 进一步调用 AnularJS 服务，该服务调用 MVC 控制器的 Action 方法以获取 Json 格式的数据。

我遇到的问题是我的 TeacherDetailsController 被解雇了，但它从未上线

 $scope.GetTeacherInfo = function () 

我不知道如何调用 GetTeacherInfo 服务。

下面是我的相关代码：

控制器

    var app = angular.module('myFormApp', [
  'angular-slideout-panel'
])
.controller('HomeController', function ($scope, angularSlideOutPanel, $http, $location, $window) 
    getallData();


//******=========Get All Teachers=========******  
    function getallData() 
        $http(
            method: 'GET',
            url: '/Home/GetAllData'
        ).then(function successCallback(response) 
            // this callback will be called asynchronously
            // when the response is available
            $scope.ListTeachers = response.data;
        , function errorCallback(response) 
            // called asynchronously if an error occurs
            // or server returns response with an error status.
            $scope.errors = [];
            $scope.message = 'Unexpected Error while saving data!!';
            console.log($scope.message);
        );
    ;


    //******=========Get Single Customer=========******

    $scope.getTeacher = function (teacherModel) 

        $http(
            method: 'GET',
            url: ('/Home/GetbyID/' + teacherModel.TeacherNo),
            params:  "TeacherNo": teacherModel.TeacherNo 
        ).then(function successCallback(response) 
            $scope.teacherModel =response.data;
            getallData();
        , function errorCallback(response) 
            $scope.message = 'Unexpected Error while loading data!!';
            $scope.result = "color-red";
            console.log($scope.message);
        );
    ;

    //******=========slide Customer popup =========******
    $scope.openPanelRight = function (teacherModel) 
        var panelInstance2 = angularSlideOutPanel.open(
            templateUrl: '/Templates/teacherDetail.html',
            openOn: 'right',
            controller: 'TeacherDetailsController',
            resolve: 
                Teacher: [
                  function () 
                      return teacherModel;
                  
                ]
            
        );
    ;

)
.controller('TeacherDetailsController', ['$scope', 'TeacherService', 'Teacher', function ($scope, TeacherService, Teacher) 

    $scope.Teacher = Teacher;
       $scope.closePanel = function () 
           $scope.$panelInstance.close('this is from the controller!!');
       ;

       $scope.GetTeacherInfo = function () 
           var TeacherInfo = TeacherService.GetTeacherInfo(Teacher.TeacherNo);
           TeacherInfo.then(function (ord) 
               $scope.Teacher = ord.data;
           , function () 
               genericService.warningNotify("Error in getting Teacher Info");
           );
       
   ])

.config(function ($locationProvider) 
    $locationProvider.html5Mode(true);
);

服务

app.service("TeacherService", ['$http', '$location', function ($http, $location) 

    this.GetTeacherInfo = function (TeacherNo) 
        var response = $http(
            method: "get",
            url: "/Home/GetbyID?TeacherNo=" + TeacherNo
        );
        return response;
    


]);

MVC 控制器

public class HomeController : Controller

    [HttpGet]
    public JsonResult GetbyID(int TeacherNo)
    
        return Json(Workflow.Teacher.GetTeacher(TeacherNo), JsonRequestBehavior.AllowGet);
    

调用 HTML

    <a href="#" ng-click="openPanelRight(teacherModel)" title="Edit Record">
        <div class="col-xs-12 col-sm-9">
            <span class="name">teacherModel.TeaFName teacherModel.TeaSName</span><br />
            <span class="fa fa-comments text-muted c-info" data-toggle="tooltip" title="teacherModel.TeaEmail"></span>
            <span class="visible-xs"> <span class="text-muted">teacherModel.TeaEmail</span><br /></span>
        </div>
    </a>

【问题讨论】：

你需要调用$scope.GetTeacherInfo()这个方法，你在哪里调用呢？

你在哪里调用了 $scope.GetTeacherInfo 函数？？

我添加了调用 html 标记，我通过 ng-click 调用 openPanelRight，$scope.openPanelRight 不应该调用控制器：'TeacherDetailsController'？

openPanelRight() 方法与$scope.GetTeacherInfo() 无关，这里具体调用$scope.GetTeacherInfo()？

我不会从任何地方调用 $scope.GetTeacherInfo()。最好的称呼是什么？

【参考方案1】：

如果您立即需要有关控制器负载的数据，请在您的 TeacherDetailsController 中调用 GetTeacherInfo() 方法。如下：

.controller('TeacherDetailsController', ['$scope', 'TeacherService', 'Teacher', function ($scope, TeacherService, Teacher) 

       $scope.Teacher = Teacher;
       $scope.closePanel = function () 
           $scope.$panelInstance.close('this is from the controller!!');
       ;

       $scope.GetTeacherInfo = function () 
           var TeacherInfo = TeacherService.GetTeacherInfo(Teacher.TeacherNo);
           TeacherInfo.then(function (ord) 
               $scope.Teacher = ord.data;
           , function () 
               genericService.warningNotify("Error in getting Teacher Info");
           );
       

       $scope.GetTeacherInfo();  //call here
   ])

【讨论】：

@ShK ：没问题..很高兴帮助你。 :)

【参考方案2】：

尝试init 函数.. 并调用它。尝试如下。

.controller('TeacherDetailsController', ['$scope', 'TeacherService', 'Teacher', function ($scope, TeacherService, Teacher) 

    function init()
     $scope.Teacher = Teacher;
    $scope.GetTeacherInfo();
    

 $scope.closePanel = function () 
           $scope.$panelInstance.close('this is from the controller!!');
       ;

       $scope.GetTeacherInfo = function () 
           var TeacherInfo = TeacherService.GetTeacherInfo(Teacher.TeacherNo);
           TeacherInfo.then(function (ord) 
               $scope.Teacher = ord.data;
           , function () 
               genericService.warningNotify("Error in getting Teacher Info");
           );
       

init();

   ])