нажмите не работает внутри повторить

Question

нажмите не работает внутри повторить

0

У меня есть директива, которая отображает карты для пользователя. На каждой карте есть кнопка "all" или "naww". AngularJS проходит через ng-repeat и генерирует каждую карту. Когда пользователь нажимает эту кнопку, я хочу, чтобы значение "all" или "naww" увеличивалось для этой конкретной карты. К сожалению, когда я нажимаю кнопки сейчас, ничего не происходит, и значения остаются на нуле. Как я могу получить значения all и naww для каждой отдельной карты?

view1.html

<div class="container">
  <div ng-repeat="animal in animals" my-animal="animal"></div>
</div>

view1.js

'use strict';

angular.module('myApp.view1', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'
  });
}])

.controller('View1Ctrl', ['$scope',function($scope) {

$scope.animals = [{'name':'Perry','animal':'Bird','awws':0,'nawws':0, 
                   'image-url': 'https://goo.gl/Vtcvk5'},
                  {'name':'Max','animal':'Cat','awws':0,'nawws':0,
                    'image-url':'https://goo.gl/bqOQci'
                  },
                  {'name': 'Julian','animal':'Duck','awws':0,'nawws':0,
                    'image-url':'https://goo.gl/v9GyTz'
                  }];
$scope.add = function(item){
                    item = item + 1;  
                  };
}])

.directive('myAnimal', function() {
  return {
    scope: {
      item: '=myAnimal'
    },
    restrict: 'EA',
    templateUrl: 'view1/card-template.html'
  };
});

cardtemplate.html

<div class="card">
  <img class="card-img-top img-responsive" ng-src="{{item.image-url}}" alt="Cute animal">
  <div class="card-block">
    <h4 class="card-title">{{item.name}}</h4>
    <p class="card-text">{{item.animal}}</p>
    <button type="button" ng-click="add(item.awws)" class="btn btn-success">Aww +1 </button>
    {{item.awws}}
    <button type="button" ng-click="add(item.nawws)" class="btn btn-danger">Naww -1 </button>
    {{item.nawws}}
  </div>
</div>

ComicStix 27 окт. 2015, в 14:46

Источник

0

у вас есть какие-либо ошибки в консоли?
Kram 27 окт. 2015, в 13:20
0

Можете ли вы создать живой демо на jsfiddle / plunkr
Tushar 27 окт. 2015, в 13:21

Теги:

javascript

html

angularjs

css

2 ответа

1

Это происходит потому, что функция $ scope.add вашего контроллера не входит в область вашей директивы myAnimal (которая имеет область выделения).

Кроме того, вы используете директиву неправильно. my-animal - ваша директива, а не атрибут вашей директивы. Во-первых, измените шаблон своей директивы :

<div class="container">
  <div ng-repeat="animal in animals" my-animal animal="animal" add="add"></div>
</div>

директива для:

.directive('myAnimal', function() {
  return {
    scope: {
      item: '=animal',
      add: '&' //method binding here
    },
    restrict: 'EA',
    templateUrl: 'view1/card-template.html'
  };
});

Как вы можете видеть, я добавил еще один атрибут, который связывает функцию "добавить" в вашем контроллере с директивой, тем самым делая ее доступной в области действия директивы. & используется для достижения этого.

Tarun Dugar 27 окт. 2015, в 10:50

Ещё вопросы

у вас есть какие-либо ошибки в консоли?
Можете ли вы создать живой демо на jsfiddle / plunkr

Kulbhushan Singh · Accepted Answer · 2015-10-27T11-52-00.000Z

Проблема заключается в том, что вы передаете буквальное значение all в функции ng-click, где, поскольку вы должны передать объект item и item.awws его свойство item.awws.

<div class="card">
  <img class="card-img-top img-responsive" ng-src="{{item.image-url}}" alt="Cute animal">
  <div class="card-block">
    <h4 class="card-title">{{item.name}}</h4>
    <p class="card-text">{{item.animal}}</p>
    <button type="button" ng-click="add(item)" class="btn btn-success">Aww +1 </button>
    {{item.awws}}
    <button type="button" ng-click="add(item.nawws)" class="btn btn-danger">Naww -1 </button>
    {{item.nawws}}
  </div>
</div>

и в js...

$scope.add = function(item){
                    item.awws += 1;//it might be required to find the item in the collection and then increment it
                  };
}])

Или проще всего сделать это прямо в HTML

<div class="card">
  <img class="card-img-top img-responsive" ng-src="{{item.image-url}}" alt="Cute animal">
  <div class="card-block">
    <h4 class="card-title">{{item.name}}</h4>
    <p class="card-text">{{item.animal}}</p>
    <button type="button" ng-click="item.awws = item.awws + 1" class="btn btn-success">Aww +1 </button>
    {{item.awws}}
    <button type="button" ng-click="item.nawws = item.nawws - 1" class="btn btn-danger">Naww -1 </button>
    {{item.nawws}}
  </div>
</div>

Спасибо за ответ. К сожалению, я получаю эту ошибку на консоли для обоих щелчков мыши: Синтаксическая ошибка: токен '=' не является основным выражением в столбце 12 выражения [item.nawws + = 1], начинающегося с [= 1]
Я понял! Вы должны сделать item.awws = item.awws + 1. Если вы сделаете это так, как вы это сделали, это выдаст ошибку синтаксического анализатора. Спасибо за помощь.