javascript - Angular - 使用 ng-click 后 Controller 刷新

Question

我有一个 Controller ，它基本上是一个对象，在该对象内部我有函数。

一开始我为变量设置了默认值并使用init() 函数从数据库中获取数据。

除一件事外，整个页面工作正常。当我使用我的 ng-click 从选择中删除时，不知何故我遇到了麻烦

  <a href="#" ng-click="listCtrl.removeFromChosen(chosen)" class="tagselect__close">
     <span class="glyphicon glyphicon-remove remove-icon" aria-hidden="true"></span>
  </a>

我的整个 Controller 再次初始化，因此它将所有值设置为默认值并再次调用 init() 函数。我不明白为什么会这样。

"use strict";
myApp.controller('ListCtrl', ['$scope', '$cookies', '$http', function ($scope, $cookies, $http) {

    var listCtrl = {
        candidate: {},
        candidates: [],
        positions: [],
        chosenPositions: [],

        init: function () {
            listCtrl.getCandidates();
            listCtrl.getPositions();
        },
        getCandidates: function () {
            $http.get('api/v1/candidates/getCandidates.php').then(function (res) {
                listCtrl.candidates = res.data;
            });
        },
        getPositions: function () {
            $http.get('api/v1/positions/getPositions.php').then(function (res) {
                listCtrl.positions = res.data;
            });
        },
        removeFromChosen: function (position) {
            var index = listCtrl.getChosenIndex(position);
            listCtrl.chosenPositions.splice(index, 1);
            //console.log(listCtrl.chosenPositions);
        },
    };

    listCtrl.init();
    $scope.listCtrl = listCtrl;
}]);

知道我做错了什么吗？

Answer 1

当使用 anchor 标签执行点击功能时，即使没有链接到任何东西，它也会默认刷新页面。为了防止这种情况，请将事件对象传递给您正在调用的函数并使用 prevent default ，如下所示:

removeFromChosen: function (event, position) {
        event.preventDefault();
        var index = listCtrl.getChosenIndex(position);
        listCtrl.chosenPositions.splice(index, 1);
        //console.log(listCtrl.chosenPositions);
    }