エラー$ parse：構文トークン ''が予期しない - 文字列内のスペース

Question

2つの単語の間のスペースで文字列を使用するまで、私のコードは正常に機能していました。 私はAngularJsを使用しています。

stringAmi = '<i class="fa fa-user-plus fa-2x" ng-click="demandeAmiNotif(' + $scope.invite + ');"></i>'; 

の$ scope.inviteは、私のようなユーザーの名前を保つ文字列です： が、私はこのエラーを持っている「ヴィクトル・ユーゴーの」：

Error: [$parse:syntax] Syntax Error: Token 'Hugo' is unexpected, expecting [)] at column 22 of the expression [demandeAmi(Victor Hugo);] starting at [Hugo);]. 

Answer 1

は、私はあなたに多くの入れ子の文字列を持っていると思いますテンプレートと物事は複雑になっています。しかし、この場合、関数呼び出し引数は、文字列の中にあり、引数として渡されずに文字列として渡されるため、エスケープされません。

var stringAmi = 
    '<i class="fa fa-user-plus fa-2x" ng-click="demandeAmiNotif(' 
    + '\'' + $scope.invite + '\'' 
    + ');"></i>'; 

しかし、真剣に、しかし、それはそれがある限りひどいに見える、私はあなたのような方法でこれをしなければならない理由を知っているが、別のアプローチを使用して検討し、維持するために固体の方法で容易にしないでください。

angular.module('myApp', []) 
 
    .controller('myController', function($scope) { 
 
     $scope.invite = 'Vitor Hugo'; 
 
     $scope.demandeAmiNotif = function(name) { 
 
      console.log(name); 
 
     }; 
 
     $scope.stringAmi = 
 
      '<button ng-click="demandeAmiNotif(' + '\'' + $scope.invite + '\'' + ');">Click this!</button>'; 
 
    }) 
 
    .directive('bindHtmlCompile', function($compile) { 
 
     return { 
 
      restrict: 'A', 
 
      link: function(scope, element, attrs) { 
 
       scope.$watch(function() { 
 
        return scope.$eval(attrs.bindHtmlCompile); 
 
       }, function(value) { 
 
\t \t \t \t 
 
        element.html(value && value.toString()); 
 
\t \t \t \t \t 
 
        var compileScope = scope; 
 
        if (attrs.bindHtmlScope) { 
 
         compileScope = scope.$eval(attrs.bindHtmlScope); 
 
        } 
 
        $compile(element.contents())(compileScope); 
 
       }); 
 
      } 
 
     }; 
 
    }); 
 

 
angular.element(function() { 
 
    angular.bootstrap(document, ['myApp']); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script> 
 
<div ng-controller="myController"> 
 
    <div bind-html-compile="stringAmi"></div> 
 
</div>