指令上<input>不工作

我有一個選擇的元素：指令上<input>不工作

<select ng-model="user" data-ng-options="user.Forename + ' ' + user.Surname for user in allusers"></select>

並在此之後，我有3個輸入：

<input type="text" value="{{ user.Surname }}" /> 
<input type="text" value="{{ user.Forename }}" /> 
<input data-convert-json-date data-jsondate="{{ user.DOB }}" />

第三輸入了一個指令應用於轉換UNIX風格日期到人類可讀的日期。

myApp.directive('convertJsonDate', function() { 
return { 
    restrict: 'EAC', 
    link: function (scope, el, attrs) { 
     var JSONdate = attrs.jsondate; 
     var formattedDate = new Date(parseInt(JSONdate.substr(6))); 
     el.val(formattedDate.format("dd/mm/yyyy")); 
    } 
    } 
});

但是，即使前兩個輸入更新爲選擇更改，第三個輸入仍爲空白。

任何想法爲何此指令無法正常工作？

來源

2014-06-20 Jonathan Smith

如果設置在瀏覽器的調試器斷點被調用的指令？ –

僅當wep應用程序啓動時。如果我不斷更改選擇元素中的選定項目，則斷點不會受到更改的影響。 –

所以你把你的斷點在鏈接方法？ –

這是beause你是不是看不輸入標籤，因爲更改，...

你需要改變你的代碼像下面：由@ryeballar

myApp.directive('convertJsonDate', function() { 
return { 
    restrict: 'EAC', 
    scope:{ 
     jsondate: '@' 
    }, 
    link: function (scope, el, attrs) { 
     scope.$watch('jsondate', function(JSONdate){ 
      var formattedDate = new Date(parseInt(JSONdate.substr(6))); 
      el.val(formattedDate.format("dd/mm/yyyy")); 
     }) 
    } 
    } 
});

作爲建議，而不是孤立的範圍和觀看它，你可以使用attrs.$observe()，這將是更有效的：

attrs.$observe('jsondate', function (JSONdate) { 
    var formattedDate = new Date(parseInt(JSONdate.substr(6))); 
    el.val(formattedDate.format("dd/mm/yyyy")); 
});

來源

2014-06-20 10:30:44

現在你已經說過了，很明顯。當範圍發生變化時，我沒有任何機制來觸發更改。我已經把手錶放進去了，它現在可以工作。非常感謝你和Dean Ward的幫助。 –

現貨上，我應該停止嘗試回答我的手機上的問題，需要很長時間來編寫代碼:) –

我覺得在這種情況下，觀察者和範圍隔離是一種矯枉過正。你可以使用attrs。$ observe（）'獲取插值的更新值。 – ryeballar

因此，我認爲你的指令不點火，因爲沒有屬性和你的指令之間的結合...

兩件事情，你可以在這裏做...

1）寫，而不是一個過濾器，並使用NG-模型綁定到你的財產。例如。 Ng-model ='user.DOB | jsondate」。請參閱filters。

2）更改您的指令以使用範圍隔離並綁定到您的屬性。例如。

myApp.directive('convertJsonDate', function() { 
    return { 
     restrict: 'A', 
     scope:{ 
     jsondate: '@' 
    }, 
    link: function (scope, el, attrs) { 
     scope.$watch('jsondate', function(JSONdate){ 
      var formattedDate = new Date(parseInt(JSONdate.substr(6))); 
      el.val(formattedDate.format("dd/mm/yyyy")); 
     }) 
    } 
    } 
});

編輯：@Bogdan Savluk打我吧:)

來源

2014-06-20 10:38:07

您可以使用邏輯函數的參數attr的.$observe()方法來得到你想要的東西，沒必要範圍的自我孤立和爲它創建一個觀察者。

HTML

<input type="text" value="{{ user.Surname }}" /> 
<input type="text" value="{{ user.Forename }}" /> 
<input data-convert-json-date="{{ user.DOB }}" />

JAVASCRIPT

myApp.directive('convertJsonDate', function() { 
    return function(scope, elem, attr) { 
    attr.$observe('convertJsonDate', function(JSONdate) { 
     var formattedDate = new Date(parseInt(JSONdate.substr(6))); 
     elem.val(formattedDate.format("dd/mm/yyyy")); 
    }); 
    }; 
});

來源

2014-06-20 10:48:36 ryeballar

指令上<input>不工作

回答

相關問題