Geek Answers Handbook

AngularJS: how to break the relationship between model and view

I am wondering if it is possible at runtime to break the connection between the model and the view. In the following example, all links are linked (via a text model). When I click the button, I want to make angular so as not to update the last input anymore (for example, to run some jquery effects ...).

<html ng-app> <head> <script src="angular-1.0.1.js"></script> </head> <body> <input ng-model="text"/><br/> <input ng-model="text"/><br/> <input ng-model="text"/><input type="button" value="<- break!" ng-click="???"/><br/> </body> </html>

My real business is here: http://jsfiddle.net/5JZPH/10/
In the jsfiddle example, I expect the old values ​​(disappearing) to no longer change when I click the "+" button.

+8
javascript angularjs
source share
1 answer

You can fadeOut jQuery-cloned html element: http://jsfiddle.net/5JZPH/29/

HTML:

 <div ng-app="test"> <input type="button" value=" + " ng-click="index = index + 1"/> <input ng-model="index" smooth="index" style="display:block"/> [{{index}}] </div>

JavaScript:

 angular.module('test', []) .directive('smooth', function() { return { transclude: 'element', priority: 750, terminal: true, compile: function(element, attr, linker) { return function(scope, iterStartElement, attr) { var prevClone = null; scope.$watch(attr.smooth, function() { var newScope = scope; linker(newScope, function(clone) { if ( prevClone ) { newPrevClone = prevClone.clone(); prevClone.after(newPrevClone); prevClone.remove(); newPrevClone.fadeOut(2000, function() { $(this).remove() }); } iterStartElement.after(clone); prevClone = clone; }); }); } } }; })
+4
source share

More articles:


All Articles