AngularJS指令在使用隔离范围时不将值插入模板

Question

给出以下指令：

angular.module('news.directives', [])
    .directive('newsArticle', function($location, $timeout) {
        return {
            restrict:    'AE',
            replace:     'true',
            templateUrl: 'partials/pages/news/directives/article.html',
            scope:       true
        };
    });

以下模板：

<div id="story-{{item.id}}" ng-class="{'red': item.active, 'story-container': true}">
    <div class="story-banner-image"></div>
    <div class="story stationary">{{ item.title | words: 10 }}</div>
    <div class="story-banner-content"></div>
</div>

以下调用该指令：

<news-article ng-repeat="item in news">
</news-article>

这很有效。但是如果我想使用一个孤立的范围并公开一个项目：

scope: {
    item: '@'
}

// or

scope: {
    news: '@'
}

// or

scope: {}

然后它没有。模板中指定的所有{{item.property}}标记都返回空值（空字符串）。为什么隔离范围内不存在item？

Answer 1

  

当scope设置为true时，它很明显地继承了它的父属性，但是当我告诉它它应该继承什么时它不会继承它。

您的问题是您对scope配置的设置方式感到困惑。为了设置与隔离范围的双向数据绑定，您应该在HTML中提供相应的属性：

<news-article ng-repeat="item in news" item="item"></news-article>

然后相应地设置指令：

scope: {
    item: '='
}

演示：http://plnkr.co/edit/b1I8PIc27MvjVeQaCDON?p=preview