current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote 0 down vote favorite

I created a display text and an input field and bind them together with ng-model as follow.

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();
    };
};

Display

enter image description here

I found this(http://jsfiddle.net/jexgF/) for unbind method, but don't know how to bind it again, if "Bind" button is clicked. Anyone could help?

Apart from bind and unbind between elements of <div> and <input>, anyone know how to bind and unbind two <input> fields?

share|improve this question
    
Why do you want to bind and unbind? – David Grinberg Mar 31 at 3:54
    
In my application, I created a preview and a textarea for entering the source code. Unbind is used during the time entering the codes to prevent injection of any other codes from preview to textarea. "Bind" is used only when preview. This is because my preview has build-in auto formatting functionality. @DavidGrinberg, do you have any ideas? – user2991183 Mar 31 at 4:11

1 Answer 1

up vote 2 down vote accepted

I'm not sure where the test() function in your example resides, but it is not a good idea - an anti-pattern, in fact - to manipulate the DOM in the controller.

The proper way is to create a variable, separate from the input variable content, represents the preview part.

You could do this simply in the View; if this logic, in your opinion, is a View-only logic. lastBound represents the last bound value of 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>

(the use of ng-init here is just for illustration purposes - you should set binding in the controller).

EDIT:

If the intent is to bind to another ng-model, then the solution is different, but not dissimilar. You still need to use 2 variables:

<input ng-model="content" ng-change="preview = (binding && content) || preview">
<input ng-model="preview" ng-change="content = (binding && preview) || content">
share|improve this answer
    
Hi, @New Dev, thanks for your answering. What If I want to bind and unbind between two input fields? I tried change your code "<div ng-bind="lastBound = (binding && content) || lastBound"></div>" to "<input ng-model="lastBound = (binding && content) || lastBound"></input>" , it throw the error "Expression 'lastBound = (binding && content) || lastBound' is non-assignable." Do you have any idea? – user2991183 Mar 31 at 6:31
    
@user2991183, see updated answer – New Dev Mar 31 at 6:42
    
Thanks @New Dev, you solve my problem. =) – user2991183 Mar 31 at 6:50

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.