Question

我正在设计一个简单的页面，它将从用户那里获取开始和结束日期，验证并发布。

以下是我的HTML代码，

<body>
   <div ng-app="appTable">
      <div ng-controller="Allocation">
         Select start date:
         <input type="text"
            datepicker
            ng-model="start_date" />
         <br>
         <br>
         Select end date:
         <input type="text"
            datepicker
            ng-model="end_date" />
         <br>
         <br>
         <button ng-click="Submit()"> Submit </button> 
         {{msg}}
         {{test1}}
         {{test2}}
      </div>
   </div>
</body>

以下是aj脚本：

   <script>
    var app = angular.module("appTable", []);

    app.controller("Allocation", function($scope) {
        $scope.start_date = "2017-05-01";
        $scope.end_date = "2017-05-19";


        $scope.Submit = function() {
            var start = new Date($scope.start_date);
            var end = new Date($scope.end_date);

            if (start > end) {
                $scope.msg = "Start date must be less than the end date."
            } else {
                $scope.msg = "";
                $scope.test = "";
                $scope.postData($scope.start_date, $scope.end_date);

            }


        };
        $scope.postData = function(s_date, e_date) {


            var data = {
                s_date: s_date,
                e_date: e_date,


            };
            $scope.test1 = "Post called 1";
            $http.post('/view_status/', data).then(function(response) {
                $scope.test2 = "Post called 2";
                if (response.data)
                    $scope.msg = "Post Data Submitted Successfully!";
            }, function(response) {
                $scope.msg = "Service not Exists";
                $scope.statusval = response.status;
                $scope.statustext = response.statusText;
                $scope.headers = response.headers();
            });
        };


    });

    app.directive("datepicker", function() {

        function link(scope, element, attrs, controller) {
            // CALL THE "datepicker()" METHOD USING THE "element" OBJECT.
            element.datepicker({
                onSelect: function(dt) {
                    scope.$apply(function() {
                        // UPDATE THE VIEW VALUE WITH THE SELECTED DATE.
                        controller.$setViewValue(dt);

                    });
                },
                dateFormat: "yy-mm-dd" // SET THE FORMAT.
            });
        }

        return {
            require: 'ngModel',
            link: link
        };
    });
</script>

出于调试目的，我采用了2个标志test1，test2，它将在POST服务调用之前和之后打印消息。标记test1正在打印消息但是test2，msg没有打印任何内容。如果我错过了什么，请帮忙。

Answer 1

您需要将$ http注入控制器

Answer 2

将$http注入您的控制器以访问$http.post。

喜欢：app.controller("Allocation", function($scope, $http) {

Angularjs：http帖子不起作用

2 个答案: