Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Change $scope/model from jquery/vanilla
<!DOCTYPE html>
<html ng-app="revalidation">
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" data-semver="3.3.1" data-require="bootstrap@3.3.1" />
<script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="script.js"></script>
</head>
<body ng-controller="main">
<form class="form-horizontal" role="form" name="form">
<div class="container">
<div class="row">
<div ng-class="{'has-error': form.city.$dirty && form.city.$invalid, 'has-success': form.city.$dirty && form.city.$valid}" class="form-group">
<label for="" class="col-md-4 control-label">City</label>
<div class="col-md-8">
<input required="" ng-model="city" name="city" class="form-control" id="city" my-directive />
<span class="help-block">Allowed only if "Earth" is selected</span>
<div ng-show="form.city.$dirty && form.city.$error.required">
<span class="text-danger">This value is required</span>
</div>
<div ng-show="form.city.$dirty">
<span class="text-danger">dirty!</span>
</div>
</div>
</div>
<br />
<button ng-click="submit()" ng-disabled="!form.$dirty || form.$invalid" class="btn btn-primary" type="button">Submit</button>
</div>
</div>
</form>
<br />
<strong>{{ city }}</strong>
<br />
<br />
<br />
Selected planet: {{planet}}
<br>
<button onclick="changeText()">Cambiar</button>
</body>
</html>
// Code goes here
angular
.module('revalidation', [])
.controller('main', [
'$scope',
function($scope) {
$scope.submit = function() {
alert('YAYYYY!! Submited!');
};
},
]);
/**
* @param {Element} fieldElement
*/
function refreshValue(fieldElement, newValue) {
console.log('Cambio', fieldElement, newValue);
var $scope = angular.element(fieldElement).scope();
if ($scope) {
var nameScope = $scope.form[fieldElement.getAttribute('name')];
nameScope.$setViewValue(newValue);
nameScope.$validate();
nameScope.$render();
}
}
$(function() {
setTimeout(function() {
window.MutationObserver =
window.MutationObserver ||
window.WebKitMutationObserver ||
window.MozMutationObserver;
// Find the element that you want to "watch"
var target = document.querySelector('#city'),
// create an observer instance
observer = new MutationObserver(function(mutation) {
mutation.forEach(function(m) {
if (m.attributeName === 'value') {
refreshValue(target, target.getAttribute('value'));
}
});
}),
// configuration of the observer:
config = {
attributes: true, // this is to watch for attribute changes.
};
// pass in the element you wanna watch as well as the options
observer.observe(target, config);
// later, you can stop observing
// observer.disconnect();
});
});
function changeText() {
const cityField = document.getElementById('city');
console.log('Holaaa');
$('#city').val('123xyz');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment