Angular js Error: $parse:syntax Syntax Error

Question

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>

我正在尝试添加带有 class '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');
           });
         }
       }
    }'

语法错误：标记 'b90' 是从 [b90"] 开始的表达式 [2b90] 第 2 列的意外标记。

我正在使用此代码附加指令

    var divElement = angular.element($("#exampleId"));
    var appendHtml = $compile('<textarea-dir id-dire="'+s4()+'"></textarea-dir>')($scope);
    divElement.append(appendHtml);

Answer 1

你的问题就在这里。您尝试使用 +s4() 将 s4 结果转换为数字，这有时 returns NaN 对于 Angular

无效

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}`);

}

Angular js Error: $parse:syntax Syntax Error

Angular js Error: $parse:syntax Syntax Error

javascript

angularjs-directive

语法错误：标记 'b90' 是从 [b90"] 开始的表达式 [2b90] 第 2 列的意外标记。