CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scopearguments
rachica
rachica

Reputation: 11

Angular directive attributes not being passed into scope

my angular directives' arguments aren't getting passed into the scope:

app.directive('sectionLeft', function() {
  return {
    restrict:'E',
    scope: {
       sectionContent: '=',
       sectionImg: '='
    },
    templateUrl: 'partials/section_left.html'
  };
});

app.directive('sectionRight', function() {
  return {
    restrict:'E',
    scope: {
       sectionContent: '=',
       sectionImg: '='
    },
    templateUrl: 'partials/section_right.html'
  };
});

They're called from here:

<div ng-repeat="content in data.home">
   <section-left ng-if="$even"  sectionContent="{{content}}" sectionImg="http://placehold.it/700x450"></div>
   <section-right ng-if="$odd" sectionContent="{{content}}" sectionImg="http://placehold.it/700x450"></div>
</div>

and look like this:

<div class="section">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6">
                {{sectionContent}}
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6">
                <img class="img-responsive" src="{{sectionImg}}">
            </div>
        </div>
    </div>
</div>

The result is just a blank space with no content, but I can see the attributes getting set on the directive element. What's going on?

Thanks in advance!

Upvotes: 0

Views: 1064

Answers (1)

charlietfl
charlietfl

Reputation: 171679

Need to remove the {{}} to pass scope variables to directive using = in isolated scope.

section-content="content"

This will imply that the 2 way binding will be to a parent scope variable named content

Upvotes: 2

Related Questions