Javascript 用AngularJS隔离指令

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

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

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

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

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

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

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

---

您正在将

dateInfo

属性双向绑定到父范围（在您的情况下，父范围可能是控制器范围）。在该属性从控制器继承其初始值后，需要将其隔离到其自己的子作用域。您可以通过单向数据绑定来实现这一点

    scope : {
       dateInfo : "@date"
    },

请注意，

=

已更改为

@

---

这允许

dateInfo

从控制器中的

$scope.date

继承其初始值。但一旦该值被继承，在指令本身内对子范围所做的任何更改都不会在控制器范围内冒泡到

$scope.date

。然后，您将有两个子作用域，每个作用域都有一个单独的

dateInfo

属性，该属性不会损坏另一个。

您将双向绑定

dateInfo

属性到父作用域（在您的情况下，父作用域可能是控制器作用域）。在该属性从控制器继承其初始值后，需要将其隔离到其自己的子作用域。您可以通过单向数据绑定来实现这一点

    scope : {
       dateInfo : "@date"
    },

请注意，

=

已更改为

@

---

这允许

dateInfo

从控制器中的

$scope.date

继承其初始值。但一旦该值被继承，在指令本身内对子范围所做的任何更改都不会在控制器范围内冒泡到

$scope.date

。然后，您将有两个子作用域，每个作用域都有一个单独的

dateInfo

属性，该属性不会损坏另一个作用域。

要解决此问题，只需在函数定义前添加

var

：

var _addDays = function(days){

---

这是一个简单的疏忽——因为它没有明确说明其范围，

\u addDays

被解释为一个全局变量。这意味着在第二次声明函数时，它会破坏第一次函数的定义。尽管函数体看起来相同，但每个上下文中的闭包都是不同的。

要解决这个问题，您只需在函数定义前添加

var

：

var _addDays = function(days){

---

这是一个简单的疏忽——因为它没有明确说明其范围，

\u addDays

被解释为一个全局变量。这意味着在第二次声明函数时，它会破坏第一次函数的定义。尽管函数体看起来相同，但每个上下文中的闭包都不同。

谢谢！然而，当我改变这个时，dateInfo似乎是空的。标签和默认日期不再显示。这是不正确的。虽然您正确地指出“=”使绑定是双向的，但OP在指令实例中指定了两个单独的变量。事实上，如果没有这样的绑定，信息将丢失给控制器。谢谢！然而，当我改变这个时，dateInfo似乎是空的。标签和默认日期不再显示。这是不正确的。虽然您正确地指出“=”使绑定是双向的，但OP在指令实例中指定了两个单独的变量。事实上，如果没有这样的绑定，信息将丢失给控制器。我无法访问您的一些库，因此我已将您的日期时间库替换为moment.js。但你应该了解要点。这个例子很有效，所以也许你可以向后看，看看你做了什么不同。祝你好运不要介意。。。我发现了这个问题。我把它作为一个答案发布在下面。我将您的示例重新构建为一个JSFIDLE:（）。我无法访问您的一些库，因此我已将您的日期时间库替换为moment.js。但你应该了解要点。这个例子很有效，所以也许你可以向后看，看看你做了什么不同。祝你好运不要介意。。。我发现了这个问题。我把它贴在下面，作为回答。接得好。你也可以先打开严格模式来防止错误的发生。捕捉得好。人们也可以首先打开严格模式来防止错误。