Angular js错误:$ parse:syntax语法错误

时间:2018-07-11 10:57:07

标签: javascript angularjs-directive

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

语法错误:令牌'b90'是表达式[2b90]的第2列中从[b90“]开始的意外令牌。

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

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

1 个答案:

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

}