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

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

javascript angularjs ajax

Javascript 如何在Ajax调用中在控制器外部调用Angularjs控制器函数,javascript,angularjs,ajax,Javascript,Angularjs,Ajax,我试图在控制器组件外部调用Angularjs函数，如下所示： <script type="text/javascript"> function saveprof() { $('.spinner').show(); $.ajax({ type: "POST", url: "saveprof", enctype: 'mult

我试图在控制器组件外部调用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>


函数saveprof（）{
$（'.spinner'）.show（）；
$.ajax({
类型：“POST”，
网址：“saveprof”，
enctype:“多部分/表单数据”，
async:true，
数据：{
“rinput_Aj”：JSON.stringify（angular.element（document.getElementById（'rdExampleApp'）））.scope（）.$func（）），
'csrfmiddlewaretoken'：$（“输入[name=csrfmiddlewaretoken]”）。val（）
},
成功：函数（数据、文本状态、jqXHR）{
$（'#message'）.html（数据）；
window.location.href='myprofile'；
窗口位置（“myprofile”）；
$（'.spinner'）.fadeOut（）；
}
});
}

以下是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>


var app=angular.module（'rdExampleApp'，['ui.rdplot']）；
应用程序控制器（'rdPlotCtrl'，函数（$scope）{
$scope.dataset={
“d0”：{“id”：0，“name”：“Housing”，“value”：18}，
“d1”：{“id”：1，“姓名”：“旅行”，“价值”：31.08}，
“d2”：{“id”：2，“名称”：“餐厅”，“价值”：64}，
“d3”：{“id”：3，“name”：“Bank”，“value”：3}，
“d4”：{“id”：4，“name”：“Movies”，“value”：10}
};
$scope.func=函数func（）{
var jdata=$scope.dataset；
返回jdata；
}
});

它抛出了一个错误未捕获的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>


拯救
var app=angular.module（'rdExampleApp'，['ui.rdplot']）；
应用程序控制器（'rdCtrl'，函数（$scope）{
$scope.dataset={
“d0”：{“id”：0，“name”：“Housing”，“value”：18}，
“d1”：{“id”：1，“姓名”：“旅行”，“价值”：31.08}，
“d2”：{“id”：2，“名称”：“餐厅”，“价值”：64}，
“d3”：{“id”：3，“name”：“Bank”，“value”：3}，
“d4”：{“id”：4，“name”：“Movies”，“value”：10}
};
$scope.func=函数func（）{
var jdata=$scope.dataset；
返回jdata；
}，函数（$scope，$http）{
$scope.saveprof=函数（）{
//显示微调器
$（'.spinner'）.show（）；
$http.post（'saveprof'{
数据：{'data'：JSON.stringify（$scope.dataset）}
})
.成功（功能（数据）{
如果（数据==“空”）{
//如果返回的数据为空，则返回代码
}否则{
//如果返回的数据不为空，则返回代码
$（'#message'）.html（数据）；
}
//皮纺纱机
$（'.spinner'）.fadeOut（）；
})
.error（函数（数据、状态、标题、配置）{
console.log（'错误'+状态）；
//出现错误时隐藏微调器
$（'.spinner'）.fadeOut（）；
})
}
}
);

我遗漏了什么？

为了向服务器运行XMLHttpRequest请求，angularjs中有许多选项，您不必使用简单的javascript并调用angular作用域来获取变量和函数。您可以使用$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（）函数中。data参数用于将您想要发送到服务器的任何数据放入其中

希望有助于好运

更新

就我个人而言，我不会对数据参数进行字符串化，而是像json对象一样传递它们

在php文件中，为了获取数据，请尝试以下操作：

$params=json_解码（文件获取内容（'php://input“），true）；//从角度工厂服务读取值

为了运行对服务器的XMLHttpRequest请求，angularjs中有许多选项，您不必使用简单的javascript并调用angular作用域来获取变量和函数。您可以使用$http或服务（暂时不使用）