0

我创建了一个显示文本和一个输入字段，并将它们与 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();
    };
};

展示

在此处输入图像描述

我为 unbind 方法找到了这个（http://jsfiddle.net/jexgF/），但如果单击“绑定”按钮，不知道如何再次绑定它。任何人都可以帮忙吗？

除了 and 的元素之间的绑定和取消绑定<div>，<input>有谁知道如何绑定和取消绑定两个<input>字段？

4

1 回答 1

3

我不确定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">
于 2015-03-31T04:56:09.337 回答