Кнопка Ng-click не работает при переходе на Сервис (учебник Thinkster)

Question

Кнопка Ng-click не работает при переходе на Сервис (учебник Thinkster)

0

Я работаю над этим уроком (https://thinkster.io/mean-stack-tutorial), и как только я переключился на добавление угловых сервисов, incrementUpvotes перестали работать, и я не могу найти причину. Я очень новичок в Угловых сервисах, и я не могу сказать, правильно ли я создал экземпляр или возникла какая-то другая проблема.

Любая помощь приветствуется !!!

index.html

<html>
<head>
  <title>Flapper News</title>
  <link href="/bootstrap.min.css" rel="stylesheet">

  <script src="/angular.min.js"></script>
  <script src="/app.js"></script>
  <script src="/angular-ui-router.js"></script>
  <style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<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="/home.html">

    <div class="page-header">
        <h1>Flapper News</h1>
      </div>

      <div ng-repeat="post in posts | orderBy:'-upvotes'">
        <span class="glyphicon glyphicon-thumbs-up"
          ng-click="incrementUpVotes(post)"></span>
        {{post.upvotes}}
        <span style="font-size:20px; margin-left:10px;">
          <a ng-show="post.link" href="{{post.link}}">
            {{post.title}}
          </a>
          <span ng-hide="post.link">
            {{post.title}}
          </span>
        </span>
      </div>

      <form ng-submit="addPost()"
        style="margin-top:30px;">
        <h3>Add a new post</h3>

        <div class="form-group">
          <input type="text"
            class="form-control"
            placeholder="Title"
            ng-model="title"></input>
        </div>
        <div class="form-group">
          <input type="text"
          class="form-control"
          placeholder="Link"
          ng-model="link"></input>
        </div>
        <button type="submit" class="btn btn-primary">Post</button>
      </form>

  </script>
</body>
</html>

/app.js

var app = angular.module('flapperNews', ['ui.router']);

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

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

  $urlRouterProvider.otherwise('home');
}]);

app.factory('posts', [function(){
    var o = {
        posts: []
    };
    return o;

}]);

app.controller('MainCtrl', [
    '$scope',
    'posts',
    function($scope, posts){
        $scope.test = 'Hello world!';
        $scope.posts = posts.posts;
        $scope.posts = [
            {title: 'post 1', upvotes: 5},
            {title: 'post 2', upvotes: 2},
            {title: 'post 3', upvotes: 15},
            {title: 'post 4', upvotes: 9},
            {title: 'post 5', upvotes: 4}
        ];

        $scope.addPost = function() {
            if(!$scope.title || $scope.title === '') { 
                return; 
            }
            $scope.posts.push({
                title: $scope.title,
                link: $scope.link, 
                upvotes: 0
            });
            $scope.title = '';
            $scope.link = '';
        };
        $scope.c = function(post) {
            post.upvotes += 1;
        };
    }]);

DNC 26 июль 2016, в 03:51

Источник

1

Где находится функция incrementUpVotes ?
austinthedeveloper 26 июль 2016, в 01:36

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Где находится функция incrementUpVotes ?

Richard Pressler · Accepted Answer · 2016-07-25T22-49-00.000Z

Мало что.

Во-первых, здесь вы импортируете данные из своей службы, а затем сразу переписываете их:

    $scope.posts = posts.posts;
    $scope.posts = [
        {title: 'post 1', upvotes: 5},
        {title: 'post 2', upvotes: 2},
        {title: 'post 3', upvotes: 15},
        {title: 'post 4', upvotes: 9},
        {title: 'post 5', upvotes: 4}
    ];

Но чтобы ответить на ваш прямой вопрос, у вас есть ваш ng-click указав на функцию, называемую incrementUpVotes(post) поэтому он ищет функцию на вашем контроллере, определенную как $scope.incrementUpVotes. Кажется, вы написали эту функцию, но назвали ее $scope.c поэтому просто переименуйте ее в $scope.incrementUpVotes и вам должно быть хорошо.

    $scope.incrementUpVotes = function(post) {
        post.upvotes += 1;
    };