用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隔離指令

回答

相關問題