javascript - ng-change 对 Controller 的输入进行更改，因为语法不起作用

Question

我正在使用 $watch 来触发输入或选择标签的更改。一切工作正常，但想要重构，而不是观察者使用 ng-change 指令。对于选择标签，它正在工作，但对于输入类型，它现在正在工作，函数没有被调用。

输入 View

<div>
    <input date-range-picker  type="text" ng-model="reviewvm.review.extDate" 
    ng-change="reviewvm.changed(reviewvm.review.extDate)" 
options="{locale:{format: 'MM/DD/YYYY'}, singleDatePicker:true}" />
    <span data-ng-click="reviewvm.openExitConfDatePicker()">
        <i class="icon-calendar"></i>
    </span>
</div>

选择 View

<select ng-change="reviewvm.agencyChanged(reviewvm.agency)" 
data-ng-model="reviewvm.agency" data-ng-options="agency as agency.agencyName for agency in reviewvm.refAgencies track by agency.id"">
    <option value="">Select {{reviewvm.area}} Department or Agency</option>
</select>

函数

reviewvm.changed = changed;

function changed(current, original) {
    console.log(current + " - " + original);
}

function agencyChanged(current, original) { 
    console.log(current + " - " + original);
}

正如我所说，选择和输入的方法相同，但对于输入，它不会进入已更改的函数内部......

笨蛋

https://plnkr.co/edit/STyQT4SivGuAdzy5ADGl?p=preview

更新

<div data-ng-class="{'not-allowed input-group' : !reviewvm.userReviewAssoc || !reviewvm.editMode, 'input-group' : reviewvm.userReviewAssoc}" data-ng-show="reviewvm.review.actualStartDt">
                        <input id="extConfDate" class="form-control date-picker" date-range-picker data-ng-disabled="!reviewvm.userReviewAssoc || !reviewvm.editMode" type="text"
                               ng-model="reviewvm.review.exitConfDt" ng-change="reviewvm.exitConfChanged(reviewvm.review.exitConfDt)"
                               min="reviewvm.review.actualStartDt" max="reviewvm.currDate" placeholder="mm/dd/yyyy" options="{locale:{format: 'MM/DD/YYYY'}, singleDatePicker:true}" />
                        <span data-ng-class="{'not-allowed input-group-addon' : !reviewvm.userReviewAssoc || !reviewvm.editMode, 'input-group-addon' : reviewvm.userReviewAssoc}" data-ng-click="reviewvm.openExitConfDatePicker()">
                            <i class="icon-calendar"></i></span>
                    </div>


function exitConfChanged(current, original) {
            console.log(current)
        }

这就是我使用当前和原始下拉菜单的方式:

ng-change="reviewvm.reviewTypeChanged(reviewvm.review.reviewType, '{{reviewvm.review.reviewType}}')"

然后在 Controller 中:

function reviewTypeChanged(original, current) {
   if (original !== "") {
                original = angular.fromJson(original);
   }
console.log(original + " - " + current);
}

这对于我当前和以前选择的所有下拉列表都工作正常，但对于输入则不然......

我认为它可能不会进入函数内部，因为这个错误形成了 angular-daterangepicker:

TypeError: Cannot read property 'startDate' of null
    at Array.<anonymous> (angular-daterangepicker.js:93)
    at Object.ngModelWatch (angular.js:23555)
    at Scope.$digest (angular.js:14404)
    at Scope.$apply (angular.js:14675)
    at done (angular.js:9725)
    at completeRequest (angular.js:9915)
    at XMLHttpRequest.requestLoaded (angular.js:9856)(anonymous function) @ angular.js:11706(anonymous function) @ angular.js:8619$digest @ angular.js:14430$apply @ angular.js:14675done @ angular.js:9725completeRequest @ angular.js:9915requestLoaded @ angular.js:9856

但不知道如何修复它，因为我在互联网上搜索很多人都有同样的错误，但仍然没有修复...

Answer 1

您不应该在 ng-change 表达式中使用 {{}}。

ng-change="reviewvm.agencyChanged(reviewvm.agency, (reviewvm.agencye || 'null'))"

仍然想知道将“null”作为字符串有什么特殊原因吗？