Увеличение счетчика углов

Question

Я бы хотел, чтобы на втором слайде работала кнопка с сердцем, как будто она работает на первом. Я не совсем уверен, куда идти отсюда, поскольку я новичок в Angularjs. Как я могу сделать кнопку приращения на 1 каждый раз, когда кто-то нажимает на сердце. Я хотел бы использовать Angularjs, а не JQuery, если это возможно.

<div class="socialshare"> 
     <div ng-app ng-class="socialshare"> <a ng-init="counter = 423" ng-click="counter = counter + 1" class="btn btn-social"><i class="fa fa-heart"></i></a> {{counter}} </div> 
    </div> 

Вот мой Fiddle:

Answer 1

вам нужно переместить нг-Init на оберточную DIV

<div class="socialshare"> 
    <div ng-app ng-class="socialshare" ng-init="counter = 423"> 
     <a ng-click="counter = counter + 1" class="btn btn-social"> 
     <i ng-click="counter = counter + 1" class="fa fa-heart"></i> 
     </a> 
     {{counter}} 
    </div> 
</div> 

тогда вы будете иметь доступ к счетчик на любой HTML-элемент внутри DIV так вы можете добавить ng-click к сердцу также

ура

(в качестве альтернативы вы можете просто поместить ng-клик на обертку div)

Answer 2

Вот быстро работающий demo. Я сделал минимальные изменения, насколько это возможно, но по мере того, как вы узнаете больше, вы должны начать использовать контроллер для обработки всей логики, а не для встраивания всего внутри html. Вы можете определенно улучшить код в демо.

Вам необходимо переместить атрибут ng-app на уровень контейнера и определить ng-контроллер на уровне слайдов, чтобы он мог иметь свою собственную область.

<div class="container" ng-app="myApp"> 
     <div class="nav"> 
      <span class="left fa fa-chevron-left fa-3x"></span> 
      <span class="right fa fa-chevron-right fa-3x"></span> 
     </div> 
    <div class="slides" ng-controller="myCtrl"> 
     <div class="left-content"> 
     <blockquote></blockquote> 
      <img src="http://s9.postimg.org/if00ntv27/sheldon_1.png" alt="Sheldon"> 
     </div> 
    <div class="right-content"> 
     <div class="socialshare"> 
     <div ng-app ng-class="socialshare"> <a ng-init="counter = 423" ng-click="counter = counter + 1" class="btn btn-social"><i class="fa fa-heart"></i></a> {{counter}} </div> 
     </div> 
     <div class="quote-content"> 
     <div class="quote"> 
      <p>Don’t you think that if I were wrong, I’d know it?</p> 
     </div> 
     <div class="author">- Sheldon Cooper</div> 
     </div> 
    </div> 
    </div> 
    <div class="slides" ng-controller="myCtrl"> 
    <div class="left-content"> 
     <blockquote></blockquote> 
     <img src="http://s9.postimg.org/w2ao9sein/samberg_1.png" alt="Sheldon"> </div> 
    <div class="right-content"> 
     <div class="socialshare"> 
     <div ng-app ng-class="socialshare"> <a ng-init="counter = 423" ng-click="counter = counter + 1" class="btn btn-social"><i class="fa fa-heart"></i></a> {{counter}} </div> 
     </div> 
     <div class="quote-content"> 
     <div class="quote"> 
      <p>I'm a story teller, Sir. It's my craft!</p> 
     </div> 
     <div class="author">- Detective Jake Perralta - aka Lone Wolf</div> 
     </div> 
    </div> 
    </div> 
</div> 

Затем добавьте следующий сценарий.

var app = angular.module('myApp', []); 
    app.controller('myCtrl', function($scope) {});