1

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?

Zabs
  • 13,852
  • 45
  • 173
  • 297
  • rules is an array (added an example above) – Zabs Nov 21 '16 at 11:56
  • Might wanna take a look at the answer I got to a question. http://stackoverflow.com/questions/35029938/angular-doesnt-set-databinding. I dont know if it helpts though – Bas Pauw Nov 21 '16 at 12:09

3 Answers3

1

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

Nikhil Mohanan
  • 1,260
  • 1
  • 12
  • 23
1

I suppose the rules variable is not available to the scope of the controller of the template, that's why it's not loading inside the template. If you have a service that sets your rules variable, make sure it's a dependency of your controller definition. Then set $scope.rules = promise/ variable from the service. That should do the trick. Also, as @Nikhil suggested, you don't need to include the controller in the html template, as you stated it once in the main template. Hope this helps.

Iulia Mihet
  • 650
  • 1
  • 10
  • 34
1

As you have another "ng-controller="RuleController"" in your included html - you are creating new scope with it's own data.

Try to access data using ng-model="$parent.rule instead and do not use ng-controller in your child template.

VadimB
  • 5,533
  • 2
  • 34
  • 48