是否可以在按鈕單擊時綁定和解除綁定元素？ - AngularJS

Question

我創建了一個顯示文本和一個輸入字段，並將它們與ng-model綁定在一起，如下所示。

HTML

<div ng-app ng-controller="test"> 
    <div ng-bind="content"></div> 
    <input id="txtElem" type="text" ng-model="content"> 
     <button ng-click="stopBinding()"> Unbind</button> 
     <button ng-click="binding()"> Bind </button> 
    </div> 

JS

function test($scope) { 
    $scope.content = 'Welcome'; 

    $scope.binding = function() { 
     angular.element(document.getElementById('txtElem')).bind(); 
    }; 

    $scope.stopBinding = function() { 
     angular.element(document.getElementById('txtElem')).unbind(); 
    }; 
}; 

顯示

我發現這個（http://jsfiddle.net/jexgF/）爲解除綁定的方法，但不知道如何重新將它綁定，如果點擊「綁定」按鈕。任何人可以幫忙？

除了在<div>和<input>的元素之間綁定和解除綁定，任何人都知道如何綁定和解除綁定兩個<input>字段？

Answer 1

我不確定示例中的test()函數在哪裏，但它不是一個好主意 - 實際上是一種反模式，用於操縱控制器中的DOM。

正確的方法是創建一個變量，與輸入變量content分開，表示預覽部分。

你可以簡單地在視圖中做到這一點;如果這種邏輯在你看來是一種僅查看邏輯。 lastBound代表content最後的界限值：

<div ng-init="binding = true"> 
    <input ng-model="content"> 
    <button ng-click="binding = false">Unbind</button> 
    <button ng-click="binding = true">Bind</button> 

    <div ng-bind="lastBound = (binding && content) || lastBound"></div> 
</div> 

（使用ng-init這裏只是爲了說明的目的 - 你應該在控制器中設置binding）。

編輯：

如果目的是綁定到另一個ng-model，那麼解決的辦法是不同的，但沒有什麼不同。您仍然需要使用2個變量：

<input ng-model="content" ng-change="preview = (binding && content) || preview"> 
<input ng-model="preview" ng-change="content = (binding && preview) || content">