奇怪的 Angular 控制器行为答案

【问题标题】：Weird Angular controller behavior奇怪的 Angular 控制器行为
【发布时间】：2014-06-19 13:37:25
【问题描述】：

我有一个时间范围控件，可以递增/递减某个输入，其值以月为单位。有一个向右箭头增加输入值（即一月 -> 二月），向左箭头减少它，用户可以编辑输入本身以输入不同的月份。

但是，时间框架控件的行为确实很奇怪。当我单击任一错误时，它会将输入的值更改为""。当我再次单击时，它将转到正确的月份。当我再次单击时，它会清除输入，并在清除输入和转到正确的月份之间来回切换。

例如：如果我连续点击右箭头5次，输入的值为：

January
""
March
""
May

这个错误可能是什么？这是我的相关代码：

myApp.controller('TimeframeCtrl', ['$scope',
    '$cookieStore',

function ($scope, $cookieStore) {

    // Create array of month names
    var month_dictionary = [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'];

    // If month cookie doesn't exist
    if ($cookieStore.get('month') == null) {

        // Create month cookie
        $cookieStore.put('month', 0);
    }

    // If year cookie doesn't exist
    if ($cookieStore.get('year') == null) {

        // Create year cookie
        $cookieStore.put('year', 2014);
    }

    // Go to the previous month
    $scope.prevMonth = function () {

        // Handle corner cases of month looping
        var month_helper = (
        $cookieStore.get('month') - 1 == -1) ? 11 : $cookieStore.get('month') - 1;

        // Update month scope variable
        $scope.month = month_dictionary[month_helper];

        // Update month cookie
        $cookieStore.put('month', month_dictionary[month_helper]);
    }

    // Go to the next month
    $scope.nextMonth = function () {

        // Handle corner cases of month looping
        var month_helper = ($cookieStore.get('month') + 1 == 12) ? 0 : $cookieStore.get('month') + 1;

        // Update month scope variable
        $scope.month = month_dictionary[month_helper];

        // Update month cookie
        $cookieStore.put('month', month_helper);
    }

    // Watch for manual editing of month
    $scope.$watch('month', function () {

        // Update month cookie
        $cookieStore.put('month', month_dictionary.indexOf($scope.month));

        // Remove warning class
        $('.month-control').removeClass('warning-input');

    });

    // Set timeframe control values
    $scope.month = month_dictionary[$cookieStore.get('month')];

    // Test whether or not form inputs are valid
    $scope.submitForm = function ($valid) {

        // If so, update graphs
        if ($valid) {

            // Update graphs

            // If not, add proper warning classes
        } else {
            if ($scope.month == undefined) {
                $('.month-control').addClass('warning-input');
            }
        }
    }
}]);

如果有人也需要 HTML，我可以添加。非常感谢。

编辑：HTML

<form class="navbar-form pull-left" name="timeframeForm" ng-controller="TimeframeCtrl" ng-submit="submitForm(timeframeForm.$valid)">
  <div class="timeframe"><i class="fa fa-calendar fa-l"></i>Timeframe</div>
  <i class="fa fa-angle-left" ng-click="prevMonth()"></i>
  <input class="form-control month-control" type="text" value="{{month}}" placeholder="Month" ng-model="month" ng-pattern="/January|February|March|April|May|June|July|August|September|November|December/g"/>
  <i class="fa fa-angle-right" ng-click="nextMonth()"></i>
  <button class="btn btn-refresh"><i class="fa fa-refresh"></i></button>
</form>

【问题讨论】：

不知道是否与您的问题有关，但$cookieStore.put('month', month_dictionary[month_helper]); 应该是prevMonth 中的$cookieStore.put('month', month_helper);，不是吗？
是的，哎呀......只是改变了这一点。似乎没有解决问题，但很好的发现。
为我工作：jsfiddle.net/9Vydw（嘲笑$scope 和$cookieStore）。因此，问题出在您未向我们展示的某些代码中，或者这里发生了其他事情。
好的。是的，我一直在跟踪 $scope.month 本身的价值，它运行良好。介意我发布 HTML 吗？我是 Angular 的新手，所以也许有一些明显的东西。如果不是，它可能是某个地方的一些流氓脚本。 :\
那里发生了很多事情。你能发布一个你正在使用的设置的小提琴吗？这里有太多事情要出错了......

标签： javascript jquery angularjs

【解决方案1】：

解决方案：

问题在于 HTML 中 ng-pattern 正则表达式末尾的 g 字符。从两个正则表达式中删除 g 解决了这个问题。不知道确切原因（此资源解释得更好：What does the regular expression /_/g mean?），但似乎g 正在用空格替换月份。不完全确定为什么每次点击箭头键都会这样做，但很高兴问题得到解决

【讨论】：