Zabs Zabs - 11 days ago 5
AngularJS Question

Cannot bind html in AngularJS partial for some unknown reason?

I have a ng-repeat that uses a partial html file to loop through and display items to a page, for some reason the variables within the partial do not display however the variable {{rule.name}} displays which is outside of the partial displays fine?

rules is an array e.g
rules[0].name = 'My first rule';
rules[0].desc = 'My first desc';
rules[1].name = 'My second rule';
rules[1].desc = 'My second desc';

<div ng-controller="RulesController" ng-if="hasManageRules" class="roles canvas-column">
<div ng-repeat="(ruleIndex, rule) in rules">
{{rule.name}} // this shows the variable fine
<div ng-include src="'templates/partial/rule.html'"></div>
</div>




// my partial/rule.html file:

<div ng-controller="RuleController" class="card-body no-hover form-group" ng-click="unfoldrule(ruleIndex)" ng-class="{'unfolded': rule.unfolded}">
<ng-form name="ruleForm">
<div class="card-header">
<div class="card-title" ng-if="!rule.unfolded" ng-bind-html="rule.name"></div>




Can anyone suggest why the rule.name variable doesn't display on the ng-bind-html for some reason?

Answer

you dont have to give ng-controller="RuleController" inside rule.html file.

Comments