var app=angular.module('myapp',[])
app.controller('myctrl',Myfunction);
function Myfunction($scope,$compile){
var self=this;
$scope.text=s4();
$scope.adding=function(){
var divElement = angular.element($("#exampleId"));
var appendHtml = $compile('<textarea-dir id-dire="'+s4()+'"></textarea-dir>')($scope);
divElement.append(appendHtml);
var writeelem = angular.element($("#output_from_textarea"));
var appendelem = $compile('<example-listen></example-listen>')($scope);
writeelem.append(appendelem);
};
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16).substring(1);
}
}
app.directive('textareaDir',Mydire);
function Mydire($rootScope){
return{
scope:{
direid:"=idDire"
},
template:'<textarea class="form-control {{direid}}txt"></textarea>',
link:function(scope,elem,attrs){
elem.bind('keypress',function(){
console.log('pressed');
$rootScope.$broadcast("valuetextbox","valuehere");
});
}
}
}
app.directive('exampleListen',listenme);
function listenme($rootScope){
return{
scope:{
},
template:'<p>text</p>',
link:function(scope,elem,attrs){
$rootScope.$on("valuetextbox", function(message){
console.log(message);
});
}
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="script.js"></script>
<script src="textbox_directive.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="myctrl">
<button ng-click="adding()">Addtextarea</button>
<div id="exampleId">
</div>
<div id="output_from_textarea">
</div>
</div>
</body>
</html>
I am attempting to incorporate a directive with the class '2b90txt' and retrieve the value from the textbox
My intention is to introduce the directive and display the output as a value
Here is the code snippet
app.directive('textareaDir',Mydire);
function Mydire(){
return{
scope:{
direid:"=idDire"
},
template:'<textarea class="form-control {{direid}}txt"></textarea>',
link:function(scope,elem,attrs){
elem.bind('keypress',function(){
console.log('pressed');
});
}
}
}'
Syntax Error: Token 'b90' is an unexpected token at column 2 of the expression [2b90] starting at [b90"].
I am using the following code to append the directive
var divElement = angular.element($("#exampleId"));
var appendHtml = $compile('<textarea-dir id-dire="'+s4()+'"></textarea-dir>')($scope);
divElement.append(appendHtml);