function showMessage(message) {
console.log("message type is" +message.type);
var response = document.getElementById('response');
var p = document.createElement('p');
p.style.wordWrap = 'break-word';
p.appendChild(document.createTextNode(message));
response.appendChild(p);
}
I have this code written in HTML script tag. I want to use this message value in my angularjs controller file. How should i get this value from the html to the controller.js
If you must do that, you can always tie a hidden input to angular using ng-model, and onload use your 'showMessage' method to populate that input. Angular will then have that data stored wherever ng-model told it to be stored.
HTML:
<input id="myMessage" type="hidden" value="" ng-model="myMessage"/>
Script Tag:
<script>
function showMessage(message) {
console.log("message type is" +message.type);
var response = document.getElementById('response');
var p = document.createElement('p');
p.style.wordWrap = 'break-word';
p.appendChild(document.createTextNode(message));
response.appendChild(p);
// not sure what all the above is doing, but assuming message is just a string, do this...
setTimeout(function() {
document.getElementById('myMessage').value = message;
});
}
</script>
Angular Code:
.controller($scope, function($scope) {
$scope.myMessage;
var myInt = setInterval(function() {
if (document.getElementById('myMessage').value !== '') {
$scope.myMessage = document.getElementById('myMessage').value;
$scope.$apply();
clearInterval(myInt);
}
}, 150);
});
While this is kind of hacky, it works.
However, I would do what @GandalftheWhite said. Gandalf is always right ;)
The AngularJS framework is designed so that you don't need to do DOM manipulation in JavaScript. Instead use directives:
HTML
<body ng-app="myApp" ng-controller="myController">
<div ng-if="messages.length">
<p ng-repeat="message in messages">{{message}}</p>
</div>
<input ng-model="m" ng-click="showMessage(m)">Enter message</input>
</body>
JS
angular.module('myApp',[]).controller('myController', function ($scope) {
var vm=$scope;
vm.messages = [];
vm.showMessage = function (m) {
vm.messages.push(m);
};
});
Everytime you want to do DOM manipulation, you should be asking how to do it with Angular directives. And if you can't do it with the built in directives, the question changes to how to do it with a custom directive.
