I have a text field that is being controlled by jQuery/external Javascript. I'm looking to add something that causes the text field to also be shown on another element. I'm looking to develop something like this but I know this isn't how you program it:
<span id="reading" ng-bind="reading"></span>
<div ng-bind="reading"></div>
<script>
$('#reading').text('100');
</script>
The desired output is to have 100 displayed in both the span and the div.
So rather that going for jQuery method to change the text, I'd change the reading scope value.
$scope.reading = '10'
But I know you wanted to call that method from external context of angular, so below is the way by which you could access the scope by having DOM query on ng-controller name .
var scope = angular.element('[ng-controller=ctrl]').scope();
scope.reading = '10'
scope.$apply(); // to update bindings.
controller name dynamically to this method then it could work..
ngRoute router in app then he could use angular.element('[ng-view]').scope() there in a place..If you want angular to detect your changes. you should do that in $apply(). You have to create a directive on those elements. inside that directive write a link function
link:function(scope,ele,attrs,ngModel){
scope.$apply(update); //trigger digest cycle
function update() {
ngModel.$setViewValue(100); //changes model
ngModel.$render(); //updates view
}
}
