angularjs：将数据从控制器传递到指令的首选方式是什么？

我有一个由几个可重用指令组成的文章项页面。页面的一个部分有几个这样的指令，它们构成了页面的主要文章

<div data-ng-controller="ArticleItemController">
    <article-breadcrumb data-bread-crumbs="model.breadCrumbs"></article-breadcrumb>
    <article-title data-title="model.title"></article-title>

    <div id="home-main">
        <div id="post-area">
            <social-box></social-box>
            <article-content-area data-content="model.content"></article-content-area>
            <article-author-info data-author="model.author"></article-author-info>
            <article-tags data-tags="model.tags"></article-tags>
            <social-box></social-box>
        </div>

        <prev-next-article data-articles="model.prevNextArticle"></prev-next-article>
        <related-article data-articles="model.relatedArticles"></related-article>
        <comments data-comments="model.comments"></comments>
    </div>
</div>

但这似乎不起作用，或者是有时。我能从指令中看到数据的唯一方法是这样做并强制$apply

app.directive('articleBreadcrumb', function ($timeout)
{
    return {
        restrict: 'EA',
        replace: true,
        scope: { breadCrumbs: '=' },
        templateUrl: '/app/directives/articleItem/articleBreadcrumb/articleBreadcrumb.html',
        link: function (scope) {
            $timeout(function() {
                $timeout(function () {
                    console.log(scope.breadCrumbs);
                }, 0);
            },0);
        }
    };
});

---

有什么更好的方法可以做到这一点？

您的想法是正确的，实际上，向指令传递数据的最佳方法是使用属性，或者如果指令非常简单，您甚至可以从父范围继承数据

以下是两个示例指令，每种情况一个：

app.directive('myScopedDirective', function() {
  return {
    restrict: 'E',
    scope: {content: '='},
    replace: true,
    template: '<div>{{content}}</div>'};
});

app.directive('myInheritedDirective', function() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div>{{content}}</div>'};
});

这是一个正在工作的plunkr，展示了解决问题的承诺：

希望有帮助

app.directive('myScopedDirective', function() {
  return {
    restrict: 'E',
    scope: {content: '='},
    replace: true,
    template: '<div>{{content}}</div>'};
});

app.directive('myInheritedDirective', function() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div>{{content}}</div>'};
});