AngularJS $适用于范围var引发异常

时间:2014-10-01 07:36:57

标签: javascript jquery angularjs datetimepicker

我正在尝试做一个非常基本的例子。 datetimepicker,绑定到简单文本。

HTML

<body ng-app="testApp">
    <div ng-controller="testCtrl as ctrl">
        <p><h1>{{ctrl.text}}</h1></p>
        <p>-----------------------------</p>
        <input id="datetimepicker" type="text">
        <p>{{ctrl.result}}</p>
    </div>
</body>

JS

var testController = angular.module('testApp.testModule', []);

testController.controller('testCtrl', [function () {
    var myScope = this;
    myScope.text = '#### Controls binding test ####';

    jQuery('#datetimepicker').datetimepicker({
        onChangeDateTime: function (dp, $input) {
            myScope.$apply(function () {
                myScope.result = $input.val();
            });
        }
    });
}]);

当我运行时,会引发以下异常: enter image description here

http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

我正在使用替代'new'控件命名使用var scope而不是$ scope,并尝试用myScope替换$ scope,但没有成功。

AngularJS v1.2.24 jQuery DateTimePicker插件v2.2.5 jQuery JavaScript Library v2.1.1

1 个答案:

答案 0 :(得分:2)

这应该做的工作

var testController = angular.module('testApp.testModule', []);

testController.controller('testCtrl', [ '$scope', function ($scope) {
    this.text = '#### Controls binding test ####';
    var vm = this; //viewModel
    jQuery('#datetimepicker').datetimepicker({
        onChangeDateTime: function (dp, $input) {
            $scope.$apply(function () {
                vm.result = $input.val();
            });
        }
    });
}]);