Question

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

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

我的控制器获得承诺，然后我通过属性将部分模型传递给我的指令。

app.controller('ArticleItemController', function ($scope, genApi)
{
    $scope.model = $scope.model || {};
    genApi.Articles.get({ Id: 60 }).$promise.then(function (data) {
        $scope.model = data;
    });
});

但这似乎不起作用或者它有时候。我可以看到指令数据的唯一方法是，如果我这样做并强制$ 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);
        }
    };
});

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

Answer 1

您的思维方式是正确的，确实将数据传递给您的指令的最佳方法是使用属性，或者如果您的指令非常简单，您甚至可以从父作用域继承数据。

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

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

这是一个工作的傻瓜，展示了解决的承诺：

http://plnkr.co/edit/a1MDQpjtWAfTYfLpiypC?p=preview

希望有所帮助

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

1 个答案: