Javascript AngularJS日期选择器值返回未定义

我试图将日期从日期选择器值传递到$http会话参数（如“2017-12-7”），但日期my datepicker日期变量为“未定义”

angular.module('MyApp', ['ngMaterial']).controller('MyController',
            function($scope, $http) {                   

                  this.myDate = new Date();
                  this.minDate = new Date("December 4, 2017");
                  this.maxDate = new Date("December 10, 2017");

                  $scope.getDataFromServer = function() {

                      var dt = this.myDate;

                        $http({

                            method : 'GET',
                            url : 'myurl',
                            params : {
                                pdate : this.myDate
                            }
                        }).then(function mySuccess(response) {
                            $scope.datacontainer= response.data;
                        }, function myError(response) {

                        });
                    };

        });

单击按钮时会调用$scope.getDataFromServer方法。 下一行var dt=this.myDate是在ChromeDevTools（F12）中查看myDate对象，它显示“未定义”

日期选择器HTML如下所示：

<div flex="20">
  <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-min-date="ctrl.minDate" md-max-date="ctrl.maxDate">
  </md-datepicker>
</div>

---

此.myDate

在此处计算为未定义，因为执行

getDataFromServer

时，此

处于不同的上下文中。这里的问题是您已经在
MyController
中初始化了
myDate
，并且函数是在
$scope
中定义的。了解更多关于差异的信息

getDataFromServer
无法查看在
MyController
中创建的
myDate

解决方案：

在相同的上下文中定义它们

angular.module('MyApp', ['ngMaterial']).controller('MyController',
        function($scope, $http) {                   
              var ctrl = this;
              ctrl.myDate = new Date();
              ctrl.minDate = new Date("December 4, 2017");
              ctrl.maxDate = new Date("December 10, 2017");

              ctrl.getDataFromServer = function() {

                  var dt = ctrl.myDate;

                    $http({

                        method : 'GET',
                        url : 'myurl',
                        params : {
                            pdate : ctrl.myDate
                        }
                    }).then(function mySuccess(response) {
                        ctrl.datacontainer= response.data;
                    }, function myError(response) {

                    });
                };

    });

示例：
angular.module（'MyApp'，['ngMaterial'，'ngMessages'，'material.svgAssetsCache']）控制器（'AppCtrl'，函数（$scope，$http）{
var ctrl=this；
ctrl.myDate=新日期（）；
ctrl.value=“未选择日期”；
ctrl.getDataFromServer=函数（）{
ctrl.value=ctrl.myDate；
}
});

标准日期选择器
印刷品
{{ctrl.value}}
在使用like
var myContext=this之前，请尝试保留父级this
并获取
myContext.myDate
@beaumondo-您可能在视图中将类似
MyApp的控制器定义为ctrl
，因此需要如下设置模式：
ng model=“ctrl.myDate”
。在控制器本身中，将以下内容放在控制器函数的最顶行：
var ctrl=this
然后将所有当前
this
和
$scope
更改为
ctrl
，这样您的代码将更具可读性。不要忘记为视图中的任何其他控制器属性添加
ctrl.
前缀这是什么，答案还是什么？阅读，解释你改变了什么，OP不应该猜测你的解释。顺便说一句，您的答案中有一个错误，它不应该解决任何问题。我建议在控制器的第一行保存对
this
的引用（即
var ctrl=this；
或
var vm=this；
），并在整个控制器中使用该引用，这将确保不会丢失内部函数中对控制器的引用，因此可以更改
$scope.datacontainer=response.data
to
ctrl.datacontainer=response.datacall@AlonEitan谢谢你的建议。修改答案以反映更改。
此参考是JS中容易混淆的方面之一。调用良好，解决方案运行良好。我认为，因为它是控制器中的一个嵌套函数，所以所有局部变量都可以访问
angular.module('MyApp', ['ngMaterial']).controller('MyController',
        function($scope, $http) {                   
              var ctrl = this;
              ctrl.myDate = new Date();
              ctrl.minDate = new Date("December 4, 2017");
              ctrl.maxDate = new Date("December 10, 2017");

              ctrl.getDataFromServer = function() {

                  var dt = ctrl.myDate;

                    $http({

                        method : 'GET',
                        url : 'myurl',
                        params : {
                            pdate : ctrl.myDate
                        }
                    }).then(function mySuccess(response) {
                        ctrl.datacontainer= response.data;
                    }, function myError(response) {

                    });
                };

    });