控制器没有得到父数据

Question

我正在做一个超过角1.5的教程，我已经深入了解它，其中一个部分似乎有关将当前用户与作者用户名匹配的问题。该类注入用户服务，我认为假设我可以从作者的父控制器继承，但它未定义。我尝试了注入$ scope，然后将一个变量设置为$ scope。$ parent.article（文章是其中有作者名称的对象），但是这仍然是未定义的。我检查了父控制器做一个控制台登录文章，它确实有我想要得到的数据。这里是我的项目链接，如果你想看看整个事情，但我会尽量只发布下面的相关代码。 https://github.com/RawleJuglal/flow_news_app/tree/front_end/src/js

父控制器（article.controller.js）

import marked from 'marked'; 

class ArticleCtrl { 
    constructor(article, $sce, $rootScope) { 
    'ngInject'; 

    this.article = article; 
    console.log(this.article); 
    //THIS IS CONSOLE LOG 
    //{title: "Juglal For *", 
     slug: "juglal-for-*-ba400n", 
     body: "<p> Need the goods</p>", 
     createdAt: "2017-04-25T14:51:42.131Z", 
     updatedAt: "2017-04-25T14:51:42.131Z", 
     author:{ 
      bio:"I'm a MEAN stack developer. But if I don't find a job in Oklahoma soon, I'll be learning C++/Sharp." 
      following:false 
      image:"https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/6/000/1e9/0e2/3cd7175.jpg" 
      username:"RawleJuglal",.... 
     } 

// Update the title of this page 
$rootScope.setPageTitle(this.article.title); 

this.article.body = $sce.trustAsHtml(marked(this.article.body, { sanitize: true })); 

    } 
} 


export default ArticleCtrl; 

儿童控制器（文章-actions.components.js）

class ArticleActionsCtrl { 
    constructor(Articles, User, $state) { 
    'ngInject'; 

    this._Articles = Articles; 
    this._$state = $state; 

//Code that causes the error because this.article.author.username is undefined 
    if (User.current) { 
     this.canModify = (User.current.username === this.article.author.username); 
    } else { 
     this.canModify = false; 
    } 
    } 
} 

let ArticleActions = { 
    bindings: { 
    article: '=' 
    }, 
    controller: ArticleActionsCtrl, 
    templateUrl: 'article/article-actions.html' 
}; 

export default ArticleActions; 

HTML（article.html）//以防万一这个问题

<div class="article-page"> 
    <div class="banner"> 
    <div class="container"> 
     <h1 ng-bind="::$ctrl.article.title"></h1> 
     <article-actions article="$ctrl.article"></article-actions> 
    </div> 
    </div> 
    <div class="container page"> 
    <div class="row article-content"> 
     <div class="col-xs-12"> 
     <div> 
      <div ng-bind-html="::$ctrl.article.body"></div> 
     </div> 
     <ul class="tag-list"> 
      <li class="tag-default tag-pill tag-outline" 
      ng-repeat="tag in ::$ctrl.article.tagList"> 
      {{ tag }} 
      </li> 
     </ul> 
     </div> 
    </div> 
<hr /> 
<div class="article-actions"> 
    <article-actions article="$ctrl.article"></article-actions> 
</div> 
<div class="row"> 
    <div class="col-xs-12 col-md-8 offset-md-2"> 
    <div> 
     <form class="card comment-form"> 
     <div class="card-block"> 
      <textarea class="form-control" 
      placeholder="Write a comment..." 
      rows="3"></textarea> 
     </div> 
      <div class="card-footer"> 
       <img class="comment-author-img" /> 
       <button class="btn btn-sm btn-primary" type="submit"> 
       Post Comment 
       </button> 
      </div> 
      </form> 
     </div> 

     <div class="card"> 
      <div class="card-block"> 
      <p class="card-text">This is an example comment.</p> 
      </div> 
      <div class="card-footer"> 
      <a class="comment-author" href=""> 
       <img class="comment-author-img" /> 
      </a> 
      &nbsp; 
      <a class="comment-author" href=""> 
       BradGreen 
      </a> 
      <span class="date-posted"> 
       Jan 20, 2016 
      </span> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

事实上，你的例子将使用角1.5而不是> 1.6。

这里的原因是：

与角1.6，绑定尚未在构造函数中设置启动。如果您需要它们，请将您的代码移至$onInit函数。

这是你的新ArticleActionsCtrl：

class ArticleActionsCtrl { 
    constructor(Articles, User, $state) { 
    'ngInject'; 

    this._Articles = Articles; 
    this._$state = $state; 
    this.User = User; 
    } 

    $onInit() {  
    if (this.User.current) { 
     this.canModify = (this.User.current.username === this.article.author.username); 
    } else { 
     this.canModify = false; 
    } 
    } 
} 

let ArticleActions = { 
    bindings: { 
    article: '=' 
    }, 
    controller: ArticleActionsCtrl, 
    templateUrl: 'article/article-actions.html' 
}; 

export default ArticleActions; 

我没有测试它，不要犹豫，告诉我，如果你有任何问题的。