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 StackOverflow", 
       slug: "juglal-for-stackoverflow-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;

子控制器（article-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。

原因如下：

从angular 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;

我没有测试过，如果你有任何问题，请随时告诉我。

控制器无法获取父数据

1 个答案: