Question

我试图在控制器组件之外调用Angularjs函数，如下所示：

   <script type="text/javascript">
        function saveprof() {
            $('.spinner').show();
            $.ajax({
                type: "POST",
                url: "saveprof",
                enctype: 'multipart/form-data',
                async: true,
                data: {
                    'rinput_Aj': JSON.stringify(angular.element(document.getElementById('rdExampleApp')).scope().$func()),
                    'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]").val()
                },
                success: function (data, textStatus, jqXHR) {
                    $('#message').html(data);
                    window.location.href = 'myprofile';
                    window.location('myprofile');
                    $('.spinner').fadeOut();
                }
            });
        }
</script>

这是angularjs控制器代码：

 <script>
    var app = angular.module('rdExampleApp', ['ui.rdplot']);
    app.controller('rdPlotCtrl', function ($scope) {
        $scope.dataset = {
         "d0": { "id": 0, "name": "Housing", "value": 18 },
         "d1": { "id": 1, "name": "Travel", "value": 31.08 },
         "d2": { "id": 2, "name": "Restaurant", "value": 64 },
         "d3": { "id": 3, "name": "Bank", "value": 3 },
         "d4": { "id": 4, "name": "Movies", "value": 10 }
          };

          $scope.func = function func() {
                 var jdata = $scope.dataset;
                 return jdata;
            }
    });

   </script>

它会抛出错误未捕获的TypeError：无法读取未定义的属性'$ func'

修改在建议之后，我将我的jquery ajax调用转换为Angularjs中的$ http函数..但它什么都没做..控制台没有错误：（

以下是调用$ http服务函数的方法

   <body ng-controller="rdCtrl">
        <a ng-click="saveprof()">Save</a>  

   <script>
    var app = angular.module('rdExampleApp', ['ui.rdplot']);
    app.controller('rdCtrl', function ($scope) {
        $scope.dataset = {
     "d0": { "id": 0, "name": "Housing", "value": 18 },
     "d1": { "id": 1, "name": "Travel", "value": 31.08 },
     "d2": { "id": 2, "name": "Restaurant", "value": 64 },
     "d3": { "id": 3, "name": "Bank", "value": 3 },
     "d4": { "id": 4, "name": "Movies", "value": 10 }
      };

      $scope.func = function func() {
             var jdata = $scope.dataset;
             return jdata;
        }, function ($scope, $http) {
        $scope.saveprof = function () {
            //show spinner        
            $('.spinner').show();
            $http.post('saveprof', {
                data: { 'data': JSON.stringify($scope.dataset) }
            })
                      .success(function (data) {
                          if (data == "null") {
                              //your code if return data empty 
                          } else {
                              //your code if return data not empty 
                              $('#message').html(data);
                          }
                          //hide spinner
                          $('.spinner').fadeOut();
                      })
                      .error(function (data, status, headers, config) {
                          console.log('error' + status);
                          //hide spinner in case of error
                          $('.spinner').fadeOut();
                      })
        }
    }
    );
</script>
</body>

我错过了什么？

Answer 1

为了向服务器运行 XMLHttpRequest 请求，你在angularjs中有很多选项，你不必乱用简单的javascript并调用角度范围来获取变量和函数。您可以使用$ http或服务（暂时保留）。

我将展示如何以原生角度 $ http 发出请求。

首先，您必须在控制器声明中导入 $ http 模块，如下所示：

var app = angular.module('rdExampleApp', ['ui.rdplot']);
app.controller('rdPlotCtrl', function ($scope,$http) {...});

进入你的控制器，你就像创建json对象一样，然后像这样执行请求：

  //show spinner        
 $('.spinner').show();        
 $http.post('dal/addEventHalls.php', {
     data: {'data': $scope.datase}
       })
           .success(function (data) {
              if (data == "null") {
                 //your code if return data empty 
              } else {
                  //your code if return data not empty 
              }
              //hide spinner
              $('.spinner').fadeOut();
          })
           .error(function (data, status, headers, config) {
              console.log('error' + status);
               //hide spinner in case of error
              $('.spinner').fadeOut();
           })

您可以看到我们不使用 url 参数，但我们将url直接传递给post（）函数。数据参数用于放置您要发送给服务器的任何数据。

<强>更新

我个人不会将数据参数字符串化。我将它们传递给json object
进入php文件，为了获取数据，试试这个：

$ params = json_decode（file_get_contents（＆＃39; php：// input＆＃39;），true）; //从angular factory-service

如何在Ajax调用中调用控制器外部的Angularjs控制器函数

1 个答案: