Menu
I wondering if it is possible at runtime to break the link between the model and the view.
In the following example, all the are link together (through the text model). When I click the button I want to make angular to not update the last input any more (for example to start 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 case is here: http://jsfiddle.net/5JZPH/10/
In the jsfiddle example I expect that the old values (these that are fading) do not change any more when I press the '+' button.
863
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;
});
});
}
}
};
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
