如何在angularjs中包裝文本並保存位置

我想用span標籤包裝文本並保存位置。我知道如何與JS做到這一點，但我不知道如何與angularjs如何在angularjs中包裝文本並保存位置

這裏做到這一點是我做了什麼：

此功能給了我文本的位置在DIV

function getSelectionPosition() { 
    var range = window.getSelection().getRangeAt(0); 
    var preSelectionRange = range.cloneRange(); 
    preSelectionRange.selectNodeContents(document.getElementById("code")); 
    preSelectionRange.setEnd(range.startContainer, range.startOffset); 
    var start = preSelectionRange.toString().length; 

    return { 
    start: start, 
    end: start + range.toString().length 
    } 
};

我走開始和結束位置並插入作爲span標籤的屬性

在此之後我想保存所有的顯着位置，並隨後加載它，我有選擇文本的功能，然後我就可以把它包裝（我希望有一個更好的解決方案）

function setSelection(savedSel) { 
    var charIndex = 0, range = document.createRange(); 
    range.setStart(document.getElementById("code"), 0); 
    range.collapse(true); 
    var nodeStack = [containerEl], node, foundStart = false, stop = false; 

    while (!stop && (node = nodeStack.pop())) { 
     if (node.nodeType == 3) { 
      var nextCharIndex = charIndex + node.length; 
      if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) { 
       range.setStart(node, savedSel.start - charIndex); 
       foundStart = true; 
      } 
      if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) { 
       range.setEnd(node, savedSel.end - charIndex); 
       stop = true; 
      } 
      charIndex = nextCharIndex; 
     } else { 
      var i = node.childNodes.length; 
      while (i--) { 
       nodeStack.push(node.childNodes[i]); 
      } 
     } 
    } 

    var sel = window.getSelection(); 
    sel.removeAllRanges(); 
    sel.addRange(range); 
}

來源

2014-10-04 liron_e

AngularJS是一個JS框架。這不是一種語言。如果你可以在JS中完成，你可以在AngularJS中完成。 – 2014-10-04 12:01:09

是的，但我不明白如何做span標記將與angularjs綁定（{{something}}） – 2014-10-04 13:30:39

如果您更改您的問題的標題可能會有所幫助。真的，你問是否可以在angularjs中使用普通的舊javascript。你目前的頭銜將被投票。 – whyceewhite 2014-10-04 17:54:31

可以使用與上面所示相同的代碼，並將其放入您的angularjs控制器中。

參照my plunker code;它是jsfiddle代碼的一個簡單的angularjs版本。

例如，假設index.html的片段看起來是這樣的：

<body ng-controller="MainCtrl"> 
    <div id="code">This is <b>some text</b> bla bla bla</div> 
    <br /> 
    <input type="button" value="Mark!" ng-click="markText()" /> 
    <input type="button" value="Remove marks!" ng-click="removeMarks()" /> 
</body>

然後例如angularjs控制器，MainCtrl，看起來是這樣的：

app.controller('MainCtrl', function($scope) { 

    var getSelectionPosition = function() { 
    var range = window.getSelection().getRangeAt(0); 
    var preSelectionRange = range.cloneRange(); 
    preSelectionRange.selectNodeContents(document.getElementById("code")); 
    preSelectionRange.setEnd(range.startContainer, range.startOffset); 
    var start = preSelectionRange.toString().length; 

    return { 
     start: start, 
     end: start + range.toString().length 
    } 
    } 

    $scope.markText = function() { 
    var currPosition = getSelectionPosition(); 
    var selection = window.getSelection().getRangeAt(0); 
    var selectedText = selection.extractContents(); 
    var span = document.createElement("span"); 
    span.className = "Mark"; 
    span.setAttribute("PosStart", currPosition.start); 
    span.setAttribute("PosEnd", currPosition.end); 
    span.appendChild(selectedText); 
    selection.insertNode(span); 
    }; 

$scope.removeMarks = function() { 
    $(".Mark").each(function() { 
     $(this).contents().unwrap(); 
    }); 
}; 

});

注意，MainCtrl是身體的angularjs控制器。按鈕上的ng-click引用控制器範圍內的markText和removeMarks函數。函數中的邏輯與您在問題中引用的完全相同（和jsfiddle）。

除了移動控制器內部的功能之外，您的任何JS代碼都不會改變。再一次，看看上面的蹦牀，看看實際的代碼工作。

來源

2014-10-04 14:58:01 whyceewhite

在這種情況下，我們是不是操縱控制器中的DOM？ – gaurav5430 2015-06-15 06:40:43

如何在angularjs中包裝文本並保存位置

回答

相關問題