Question

我有一个div，图片每9秒更换一次，我想保留它，但我想在用户点击时更改图片。我认为最简单的方法是使用ng-click功能，但我不知道如何使用我的代码：在HTLM中：

     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 session fondbleuSession">
                      <div>
                        <div ng-controller="eventCtrl">
                          <div ng-repeat="data in event" ng-if="data.id == actualSession">
                            <div class="sessionTxt">
                                <h1>{{data.title}} </h1>
                              <p>{{data.description}} </p>
                            </div>
<!-- ng-click here ? -->   <a ng-href="{{data.url}}" class="sessionImg" ng-style="{'background-image':'url({{data.src}})'}" >
                            </a>
                          </div>
                        </slider>
                        </div>
                      </div>
                    </div>

和在eventCtrl

中

app.controller('eventCtrl', function($scope, $interval) {

  $scope.actualSession = 0;
  var sessionLength = 0;

  // INFORMATION GENERAL EVENT
  // id = reference de l'image pour l'ordre de passage (+1 a chaque nouveau slide ajouté)
  // title = titre de l'event
  // description = resume rapide de l'event
  // src = adresse de l'image
  // url = lien de redirection vers article/sharepoint...

  $scope.event = [
    {
      "id": 1,
      "title": "Site Events",
      "description": "",
      "src": "images/index/event/Photo1.jpg",
      "url": ""
    },
    {
      "id": 2,
      "title": "Site Events",
      "description": "",
      "src": "images/index/event/Photo2.jpg",
      "url": ""
    },
    {
      "id": 3,
      "title": "Site Events",
      "description": "",
      "src": "images/index/event/Photo3.jpg",
      "url": ""
    },
    {
      "id": 4,
      "title": "Site Events",
      "description": "",
      "src": "images/index/event/Photo4.jpg",
      "url": ""
    },
    {
      "id": 5,
      "title": "Site Events",
      "description": "",
      "src": "images/index/event/Photo5.jpg",
      "url": ""
    }
  ];

  sessionLength = _.size($scope.event);


  $interval(function() {
    $scope.actualSession = $scope.actualSession + 1;
    if ($scope.actualSession == sessionLength) {

      $scope.actualSession = 0;
    }
  }, 9000);   //timer switch event (1000 = 1 seconde)

})

并且我不知道是否可以使用这两个功能：在x秒后自动更改图片并在用户点击时更改图片。此外，当我们看到最后一张照片时，我不知道谁去第一张照片非常感谢你，祝你有愉快的一天

Answer 1

尝试在锚标记周围包装div并在那里使用ng-click，希望它可以正常工作。

Answer 2

如果您想要更改actionSession变量，它应该很简单：

ng-click="ctrl.someFunc()"

然后在控制器中：

someFunc() {
  $scope.actualSession = $scope.actualSession === sessionLength - 1 ? 0 : $scope.actualSession++;
}

如何在我的案例中使用ng-click功能？

2 个答案: