I have been working on a angular js site, which get the data from webservice/api. One api returns html and angular js code to dynamically add conroller or whatever new angular component we want to add new. This string will come in api response
<div id="homecontainer" class="flex-center p-page" loader style="overflow:hidden;">
<div class="column-1">
<div class="grid m-0 col-xs-12">
<div ng-repeat="Widget in V3Widgets track by $index" class="grid-item">
<div class="grid-sizer"></div>
{{Widget}}
</div>
</div>
<div ng-controller="WelcomeController">
{{greeting}}
</div>
<script>
var app = angular.module('demo', [])
//RestService is Other Module Which is Already Working fine
.controller('WelcomeController', function ($scope,RestService) {
$scope.greeting = 'Welcome!';
});
angular.bootstrap(document, ['demo']);
</script>
</div>
</div>
Now i have a directive to bind this string to page
<renderdynamicwidgethtml ng-if="Widget.Id==null && Widget.Html!=null" html="Widget.Html"/>
Directive's js
.directive('renderdynamicwidgethtml', ['$compile', function ($compile) {
return function (scope, element, attrs) {
scope.$watch(
function (scope) {
return scope.$eval(attrs.html);
},
function (value) {
element.html(value);
$compile(element.contents())(scope);
}
);
};
}])
scope.$eval
should convert the string to angular components, but it failed with this error.
[ng:btstrpd] http://errors.angularjs.org/1.3.17/ng/btstrpd?p0=document
#homecontainer
?html
look like ? It seems that it contains anotherng-app
and shouldn't.