如何在點擊時獲得angularjs中div的長度？

這真的很基本，但我不知道爲什麼我無法解決這個問題。如何在點擊時獲得angularjs中div的長度？

我試圖得到一個div的長度，當我點擊它，我試過不同的方式來做到這一點，但沒有成功。

這裏是我想要的一個例子：http://plnkr.co/edit/eGqu2HSUixr0S5CH3jNr?p=preview

如果有人可以解釋如何是「角辦法」要做到這一點會非常感激。 :)

2013-12-20 DreaMTT

this將參照scope，嘗試通過$event.target，而是和因爲你要調用html()與angular.element包裹。

http://plnkr.co/edit/ibBNM0wK4RDH2JnamfV9?p=preview

<div ng-click="getLength($event.target)">Click to know the length of this string</div> 

app.controller('MainCtrl', function($scope, $parse) { 
    $scope.getLength = function(obj) { 
    var obj = angular.element(obj); 
    try { 
     $scope.output = (obj !== undefined) ? obj.html().length : 'undefined'; 
    } catch(err) { 
     $scope.output = err.message; 
    } 

    } 
});

來源

2013-12-20 08:57:06

如果你想知道DOM中的字符串，然後做這將是把功能在自定義指令的角路的長度。

app.directive('sendLengthOnClick', function() { 
    return { 
    scope: { 
     'localSendLength': '&sendLengthOnClick' 
    }, 
    link: function(scope, iElement, iAttr) { 
     iElement.on('click', function() { 
     var length = iElement.text().length; 
     scope.localSendLength({length:length}); 
     }); 
    } 
    } 
});

然後，您可以添加屬性send-length-on-click任何元素，字符串長度發送到功能父範圍：

<div send-length-on-click="useLength(length)">Click to know the length of this string</div>

您可以在以下Plunker看到這個動作：

http://plnkr.co/edit/Zuk2wnndayvBgYyNXQaL?p=preview

不過，我會很好奇，想知道你爲什麼會這樣。這與基於模型數據的計算有些接近，在服務中更常見的是，在訪問DOM之前獲取字符串的長度，而不是之後。

來源

2013-12-20 09:13:59

真的！不幸的是，我來自一個jQuery世界，用來做很多DOM操作。我正在努力改變我在使用Angular時的想法，因此任何改變我思維過程的最佳實踐或建議都將受到高度讚賞。我剛創建了一個自定義電子郵件組件這個組件的功能與輸入一樣，我有義務處理這些操作，反正如果你能夠以正確的角度來說明這一點，那就太棒了！你可以在這裏查看這個組件：http://plnkr.co/edit/9TmCt2vWzdOgWtrBIkEZ?p=preview – DreaMTT

與原始問題並不完全相關，但此刻我認爲選擇了一個div with contenteditable =「true」過度複雜化，並且在確保用戶不打破它的情況下（如果用戶輸入或在其中粘貼一些html，那該怎麼辦？），這將很難得到正確的結果。標準HTML在''上已具有'placeholder'屬性，而''元素上的ng-model可以將其與範圍上的值綁定。如果你需要一些自定義驗證，那麼你應該閱讀[ngModelController]（http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController） –

如何在點擊時獲得angularjs中div的長度？

回答

相關問題