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

你需要将ng-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>

然后您将可以访问div内任何HTML元素的计数器所以你也可以添加一个ng-click到心脏

欢呼声

（或者你可以把ng-click放在包装div上）

Answer 2

这是快速工作demo。我尽可能做了最小的更改但是当你了解更多时，你应该开始使用控制器来处理所有逻辑而不是将所有内容嵌入到html中。你绝对可以在demo中改进代码。

您需要将ng-app属性移动到容器级别，并在幻灯片级别定义ng-controller，以便它可以拥有自己的范围。

    <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) {});

Angularjs计数增量

2 个答案: