是否可以在按钮单击时绑定和取消绑定元素？ - 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/）for unbind方法，但是不知道如何再绑定它，如果＆＃34; Bind＆＃34;单击按钮。有人可以帮忙吗？

除了<div>和<input>的元素之间的绑定和取消绑定之外，任何人都知道如何绑定和取消绑定两个<input>字段？

Answer 1

我不确定示例中的test()函数所在的位置，但实际上是一个反模式 - 操纵控制器中的DOM。

正确的方法是创建一个与输入变量content分开的变量，代表预览部分。

你可以在视图中简单地做到这一点;如果你认为这个逻辑是一个只有View的逻辑。 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">