Cannot bind html in AngularJS partial for some unknown reason?

Question

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?

Might wanna take a look at the answer I got to a question. stackoverflow.com/questions/35029938/…. I dont know if it helpts though — Bas Pauw
– Bas Pauw, Commented Nov 21, 2016 at 12:09

Nikhil Mohanan · Accepted Answer · 2016-11-21 11:56:39Z

1

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

answered Nov 21, 2016 at 11:56

Nikhil Mohanan

1,2601 gold badge12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zabs Over a year ago

cheers Nikhil! will accept shortly.. still getting to grips with Angular :)

VadimB · Accepted Answer · 2016-11-21 12:07:52Z

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.

answered Nov 21, 2016 at 12:07

VadimB

5,7213 gold badges39 silver badges49 bronze badges

Comments

Iulia Mihet · Accepted Answer · 2016-11-21 12:16:53Z

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.

edited Nov 21, 2016 at 12:16

answered Nov 21, 2016 at 12:00

Iulia Mihet

7102 gold badges11 silver badges35 bronze badges

Collectives™ on Stack Overflow

Cannot bind html in AngularJS partial for some unknown reason?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related