Question

我在这里关注了thinkster angular js教程：

https://thinkster.io/angulartutorial/mean-stack-tutorial/

并点击评论旁边的upvotes图标无法增加upvote计数。

在ui-router模板（在index.html中包含内联）中，ng-click调用addUpvote（） - 但addUpvote（）由另一个状态中指定的控制器定义。因此模板可以调用addUpvote（）的唯一方法是模板的关联状态/控制器以某种方式从其他状态/控制器继承。事实上，根据这里的ui-router文档：

https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

在我的app.js中定义状态的方式，

app.js：

app.config([
'$stateProvider', 
'$urlRouterProvider', 
function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('home');

  $stateProvider
    .state('home', { 
      url: '/home',
      templateUrl: '/home.html',
      controller: 'MainCtrl' }
    )
    .state('posts', {  
      url: '/posts/{id}',
      templateUrl: '/posts.html',
      controller: 'PostsCtrl' }
    );

}]);

......第二个州从第一个州继承编辑：更仔细地阅读文档让我相信这不是真的;我认为，为了使posts州继承home州，我必须将posts州的名称更改为home.posts。但是，当我尝试这样做时，它会破坏其他内容：帖子旁边的评论链接不再有效。无论如何，我不认为写作：

$stateProvider
  .state(...)
  .state(...);

在两个状态之间创建任何继承。

这是第一个州的控制者：

app.controller('MainCtrl', ['$scope', 'posts', function($scope, posts) {
  $scope.posts = posts.posts;
  /*
  [
    {title: "post1", upvotes: 3, link: ''},
    {title: "post2", upvotes: 5, link: ''},
    {title: "post3", upvotes: 1, link: ''}
  ];
*/
  $scope.addPost = function() {
    var title = $scope.title;

    if (title && (title.trim().length > 0) ) {
      $scope.posts.push({
        title: title, 
        upvotes: 0, 
        link: $scope.link,
        comments: [
          {author: 'Joe', body: 'Cool post!', upvotes: 0},
          {author: 'Bob', body: 'Great idea, but everything is wrong!', upvotes: 0}
        ]
      });
    }

    $scope.title = '';
    $scope.link = '';
  }

  //*****HERE IS THE FUNCTION THAT IS NOT BEING CALLED*****
  $scope.addUpvote = function(post) {
    console.log("in addUpvote");
    ++post.upvotes;
  }

}]);

据我所知，我的模板应该可以调用addUpvote（）。但是，当我单击注释旁边的upvote图标时，console.log（）行不输出任何内容，因此显然没有调用addUpvote（）。

以下是index.html的一部分：

<body ng-app="flapperNews">

  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <ui-view></ui-view>
    </div>
  </div>
....
....
....
<script type="text/ng-template" id="/posts.html">
  <div class="page-header">
    <h3>
      <a ng-show="post.link" href="{{post.link}}">
        {{post.title}}
      </a>
      <span ng-hide="post.link">
        {{post.title}}
      </span>
    </h3>
  </div>

  <div ng-repeat="comment in post.comments | orderBy:'-upvotes'">
    <span class="glyphicon glyphicon-thumbs-up"
          ng-click="addUpvote(comment)"></span>

    {{comment.upvotes}} - by {{comment.author}}

    <span style="font-size:20px; margin-left:10px;">
      {{comment.body}}
    </span>
  </div>
</script>
</body>

在该模板的底部，ng-click调用addUpvote（）。为什么不调用addUpvote（）。

Answer 1

文档中的解释稍微低一些：

https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#scope-inheritance-by-view-hierarchy-only

仅按视图层次结构的范围继承

请记住，范围属性仅继承状态链   如果你的州的意见是嵌套的。 范围的继承   属性与状态的嵌套无关和   与嵌套视图（模板）有关。

完全有可能你有嵌套状态的模板   在您网站中的各种非嵌套位置填充ui-views。的在   这个场景你不能指望访问范围变量   父母国家在儿童国家观点中的观点。

和

https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#what-do-child-states-inherit-from-parent-states

儿童国家从父母国家继承什么？

子状态DO从父状态继承以下内容：

通过解决方案解决了依赖关系   自定义数据属性
  没有其他东西被继承（没有控制器，模板，网址等）。   ...   ...   子状态将从父状态继承数据属性   他们可以覆盖。

$stateProvider.state('parent', {
      data:{
         customData1:  "Hello",
         customData2:  "World!"
      }
   })
   .state('parent.child', {
      data:{
         // customData1 inherited from 'parent'
         // but we'll overwrite customData2
         customData2:  "UI-Router!"
      }
   });

因此，为了使评论upvotes有效，我这样做了：

app.controller('PostsCtrl', [
'$scope', 
'$stateParams', 
'posts',
function($scope, $stateParams, posts) {
  $scope.post = posts.posts[$stateParams.id];

  $scope.addUpvote = function(comment) {
    console.log('comment upvote');
    ++comment.upvotes;
  }

}]);

Answer 2

我有同样的错误，当我在cURL中运行url时，它返回req.comment.upvote不是错误堆栈顶部的函数。

C：\ Users \ ddavis＆gt; curl -X PUT http://localhost:3000/posts/57b380f850eaca0c1233a3b7/comments/57b42f4b305a94e40c75970d/upvote req.comment.upvote不是一个函数 ...

就我而言，当我在comments.js模型中定义一个upvote函数时，它起作用如下：

var mongoose = require('mongoose');

var CommentSchema = new mongoose.Schema({
        body: String,
        author: String,
        upvotes: {type: Number, default: 0},
        posts: [{ type: mongoose.Schema.Types.ObjectId, ref: 'Post'}]    
         
});

CommentSchema.methods.upvote = function(cb) {
  this.upvotes += 1;
  this.save(cb);
};

mongoose.model('Comment', CommentSchema);

C：\ Users \ ddavis＆gt; curl -X PUT http://localhost:3000/posts/57b380f850eaca0c1233a3b7/comments/57b42f4b305a94e40c75970d/upvote {“_ id”：“57b42f4b305a94e40c75970d”，“body”：“另一个评论”，“作者”：“用户”，“__ v”：0，“帖子”：[]，“upvotes”：3}

为什么不评论upvotes工作？ thinkster.io，angularjs tutorial，mean，incrementUpvote（）

2 个答案: