javascript - 使用 AngularJS 隔离指令

Question

我是 Angular 的新手。我创建了一个小指令，用户可以在其中输入时间戳并添加/减去 1 天。该指令需要隔离，以便它可以在我的应用程序中多次出现。

这是我初始化日期的部分:

$scope.dateFrom = {
    label : 'Date From',
    date : mii.utils.date.dateToIntDate(start)
}
$scope.dateUntil = {
    label : 'Date Until',
    date : mii.utils.date.dateToIntDate(end)
}

在我 View 的 HTML 中，我创建了我的指令的 2 个实例:

<date-input date="dateFrom"></date-input>

<date-input date="dateUntil"></date-input>

结果如下图所示。两个独立的输入字段，每个字段都有自己的标签和默认值。到目前为止，隔离似乎奏效了。

但是，问题是，当我单击Date From 的加号时，它会向Date Until 的值添加一天。当我在函数 _addDays 上查看调试器时，我看到 $scope.dateInfo 确实指向 dateUntil 对象，即使我正在与 date From 进行交互。我错过了什么？

日期.html

<div id="date-input">
    <span>
        <img src="assets/img/minus.png" class="icon left" ng-click="yesterday()"/>
        {{dateInfo.label}}
        <img src="assets/img/add.png" class="icon right" ng-click="tomorrow()"/>
    </span>
    <input ng-model="dateInfo.date" class="center"/>
</div>

dateController.js

app.directive("dateInput", function() {
    return {
        restrict: "E",

        templateUrl : "app/shared/dateInput/date.html",

        scope : {
           dateInfo : "=date"
        },

        link : function($scope, $element, $attrs) {
            $scope.yesterday = function(){
                _addDays(-1);
            };

            $scope.tomorrow = function(){
                _addDays(1);
            }

            _addDays = function(days){

                var d = mii.utils.date.intDateToDate($scope.dateInfo.date);
                var newD = new Date(d);
                newD.setDate(d.getDate()+days);
                $scope.dateInfo.date = mii.utils.date.dateToIntDate(newD);
            }
        }
    }
});

Answer 1

要解决这个问题，您需要做的就是在函数定义前添加 var:

var _addDays = function(days){

这是一个简单的疏忽——因为它没有具体说明其范围，_addDays 被解释为全局变量。这意味着第二次声明该函数时，它破坏了第一次的定义。尽管函数体看起来相同，但闭包在每个上下文中都是不同的。