javascript - Angular Directive(指令)属性未传递到范围内

Question

我的 Angular Directive(指令)的参数没有传递到作用域中:

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'
  };
});

他们从这里被召唤:

<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>

看起来像这样:

<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>

结果只是一个没有内容的空白，但我可以看到指令元素上设置的属性。这是怎么回事？

提前致谢!

Answer 1

需要删除 {{}} 以在隔离作用域中使用 = 将作用域变量传递给指令。

section-content="content"

这意味着 2 路绑定(bind)将指向名为 content 的父作用域变量