用AngularJS隔离指令

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

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

$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对象，即使我正在使用date 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); 
      } 
     } 
    } 
});

来源

2015-04-19 Hazaart

我重建了你的例子作为jsfiddle：（http://jsfiddle.net/aqewsu40/1/）。我没有访问你的一些库，所以我用moment.js替换了你的日期时间库。但你应该知道它的要点。这个例子很有用，所以也许你可以倒退，看看你可能做了什么不同的事情。祝你好运！ –

没关系......我发现了这个问题。我在下面发布它作为答案。 –

为了解决这个问题，所有你需要做的是在前面加上var函数定义：

var _addDays = function(days){

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

来源

2015-04-19 18:54:32

好的。也可以打开严格的模式，以防止出现错误。 – zeroflagL

谢谢，这工作！ – Hazaart

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

scope : { 
     dateInfo : "@date" 
    },

注意的=已更改为@

这使得dateInfo继承在控制器从$scope.date其初始值做到这一点。但是，一旦该值被继承，对指令本身内的子作用域所做的任何更改都不会在控制器作用域中高达$scope.date。然后，您将拥有两个子范围，每个范围都有一个不会破坏另一个的单独的dateInfo属性。

来源

2015-04-19 18:13:05

谢谢！但是，当我改变这个，dateInfo似乎是空的。标签和默认日期不再显示。 – Hazaart

这是不正确的。虽然您已经正确指出“=”确实进行了双向绑定，但OP已经在指令实例中指定了两个单独的变量。事实上，没有这种绑定，信息就会丢失给控制器。 –

用AngularJS隔离指令

回答

相关问题