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)
}

在我的视图的HTML中，我创建了2个指令实例：

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

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

结果如下图所示。两个单独的输入字段，每个字段都有自己的标签和默认值。到目前为止，隔离似乎正在起作用。

dates

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

date.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被解释为全局变量。这意味着第二次声明函数时，它破坏了第一次的定义。即使函数体看起来相同，但每个上下文中的闭包都是不同的。

Answer 2

您将dateInfo属性绑定到父作用域是双向的（在您的情况下，父作用域可能是控制器作用域）。在从控制器继承$scope.date的初始值后，您需要将此属性隔离到其自己的子范围。您可以使用单向数据绑定

来完成此操作

    scope : {
       dateInfo : "@date"
    },

请注意=已更改为@

这允许dateInfo从控制器中的$scope.date继承其初始值。但是，一旦继承了该值，对指令内部子范围所做的任何更改都不会在控制器范围内冒泡到$scope.date。然后，您将拥有两个子范围，每个范围都有一个单独的dateInfo属性，不会破坏另一个。

使用AngularJS隔离指令

2 个答案: