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>
我正在尝试添加一个类为'2b90txt'的指令,并且还从文本框中获取值
我的计划是将指令添加并输出到值上
这是代码
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');
});
}
}
}'
我正在使用此代码追加指令
var divElement = angular.element($("#exampleId"));
var appendHtml = $compile('<textarea-dir id-dire="'+s4()+'"></textarea-dir>')($scope);
divElement.append(appendHtml);
答案 0 :(得分:0)
您的问题在这里。您尝试使用+ s4()将s4结果转换为数字,有时会返回不适用于Angular的NaN
function s4() {
const t = Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
return t;
}
console.log(s4());
for (var i = 0; i < 10; i++) {
const t = s4();
console.log(`result: ${t}, converted to: ${+t}`);
}