I am trying to replace certain values in a div using angular. The problem is that the div content is generated by an outside service so I cant just add ng-model and be done with it. I've tried the following and some various variations with no luck
var o = angular.element(document.querySelector('#maintwo'));
var r = o[0].innerHTML.replace('TWO','REPLACE');
angular.element(document.querySelector('#maintwo')).innerHTML = r;
just remove angular.element() from this line, and it will work as you need it : angular.element(document.querySelector('#maintwo')).innerHTML = r;
Do it , like : document.querySelector('#maintwo').innerHTML = r;
if you remove the angular.element() container from the 3rd line it works.
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myCtrl">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-sanitize.js"></script>
</head>
<body>
<button ng-click="replaceText()">
replace
</button>
<div id="maintwo">MAIN TWO</div>
<script>
var myApp = angular.module('myApp', ['ngSanitize'])
function myCtrl($scope) {
$scope.replaceText = function() {
var o = angular.element(document.querySelector('#maintwo'));
var r = o[0].innerHTML.replace('TWO','REPLACE');
document.querySelector('#maintwo').innerHTML = r;
}
}
</script>
</body>
</html>
