Dynamic Element with AngualrJS $compile

Question

I am creating dynamic button and using $compile to bind ng-click event. I am adding two parameters there. Problem is that if the parameter is string and having space in between, Parameter is splitting.

Here is my Javascript code:

var name 'Demo 1';
var str= 'hello'
var btnhtml = '<button type="button" class="btn btn-primary btn-xs" ng-click=getShops("' + str + '","' + name + '")>View Detail</button>';
temp = $compile(btnhtml)($scope);

Generated HTML code looks like following:

<button type="button" class="btn btn-primary btn-xs ng-scope" ng-click="getData("hello","Demo" 1")>View Detail</button>

Where my desired output is:

<button type="button" class="btn btn-primary btn-xs ng-scope" ng-click="getData("hello","Demo1")>View Detail</button>

How can I fix this. Thanks.

Answer 1

You haven't escape html properly

btnhtml = '<button type="button" class="btn btn-primary btn-xs" ng-click="getShops(\'' + str + '\',\'' + name + '\')">View Detail</button>';

I removed the double quote symbol " before the escape.