ng-change对输入不起作用

I'm new to AngularJS and currently struggling with the following problem.

我是AngularJS的新手,目前正在努力解决以下问题。

As you can see here in my plnkr I can change the value of the $scope.myDate.value.

正如您在我的plnkr中看到的那样,我可以更改$ scope.myDate.value的值。

The problem now is, that I can't work with this scope in a function, when adding ng-change="barFunc()" to the <input>.

现在的问题是,当在中添加ng-change =“barFunc()”时,我无法在函数中使用此作用域。

How is it possible to work with ng-change or ng-watch here? It would be great if someone could make my plnkr work.

如何在这里使用ng-change或ng-watch?如果有人可以让我的plnkr工作,那将是很棒的。

<!DOCTYPE html>
<html ng-app="demo">
<head>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="//rawgithub.com/g00fy-/angular-datepicker/1.0.3/dist/index.css" rel="stylesheet">
    <style>
      input {margin: 45px 0 15px 0;}
      pre{padding: 15px; text-align: left;}
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div ng-controller="foo">
                <input type="datetime" class="form-control" date-time ng-model="myDate.value"
                  ng-change="barFunc()" format="yyyy-MM-dd hh:mm:ss" placeholder="Select datetime">
                <pre>myDate: {{myDate.value}}</pre>
                <pre>myDate + " abc": {{ custom.value }}</pre>
            </div>  
        </div>
    </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//code.angularjs.org/1.4.8/angular.js"></script>
<script src="//rawgithub.com/g00fy-/angular-datepicker/1.0.3/dist/index.js"></script>
<script>
angular.module('demo', ['datePicker']).controller('foo',['$scope', function($scope){
    $scope.myDate = {
        value: ''
      };
      
    $scope.barFunc = function() {
      $scope.custom.value = $scope.myDate.value + " abc";
    };
}]);
</script>
</body>
</html>

3 个解决方案

#1

You have to define $scope.custom before you can access to $scope.custom.value

您必须先定义$ scope.custom,然后才能访问$ scope.custom.value

#2

I would use $watch in this case:

在这种情况下我会使用$ watch:

in your controller:

在你的控制器中:

$scope.custom = {
    value : ''
};

$scope.$watch('myDate.value', function() {
    $scope.barFunc();
});

$scope.barFunc = function() {
  $scope.custom.value = $scope.myDate.value + " abc";
};

or in plunkr

或者在plunkr中

#3

You could set up a watcher like this:

你可以像这样设置一个观察者:

$scope.$watch('myDate', function(oldValue, newValue) {
$scope.barFunc(newValue);

});

but you'll also need to define your custom object:

但您还需要定义自定义对象:

  $scope.custom = {
    value: ''
  };

and it should work. I don't feel like this is the best solution - I generally feel like if I'm setting watchers because I don't understand why something's not working as expected then it's better to figure out why it's not working. I get that's what you're trying to do, and am only offering this as something that would solve your problem quickly if that's what you need.

它应该工作。我觉得这不是最好的解决方案 - 我通常觉得如果我设置了观察者,因为我不明白为什么某些东西没有按预期工作,那么最好弄明白为什么它不起作用。我知道你正在尝试做的事情,我只是提供这个可以快速解决问题的东西,如果你需要的话。

#1