Ng-Tag-Input 指令不清除值

Question

我正在使用 ngTagInput 指令进行自动建议。我想要的是清除点击建议后的自动建议。虽然它在第一次调用函数时清除，但在第二次调用时不清除。它在第二次函数调用时添加为标记。我想删除它。

在 Html，

<tags-input ng-model="autoSongs"
        key-property="_id"
        display-property="name"
        add-from-autocomplete-only="true"
        replace-spaces-with-dashes="false"
        on-tag-adding="songAdded($tag)"
        on-tag-added="emptyScope()"
        template="tag-template"
        placeholder="type here to search for album..."
        on-tag-removed="songRemoved($tag)">
<auto-complete source="loadSongs($query)"
               min-length="2"
               debounce-delay="5"
               max-results-to-show="10"
               template="autocomplete-template"></auto-complete>
</tags-input>

在控制器上这样，

$scope.loadSongs = function(query) {
        var autoFilter = 'name=' + query;
        return songService.autoSuggest(autoFilter, function(error, data) {
            if (error) {
                toastr.error(error.message, 'Error');
                return false;
            }
            return data;
        });
    };

    $scope.songAdded = function(query) {
        if ($scope.pushArray.checkbox.length === 0) {
            toastr.error('Select record to assign album.', 'Error');
            return false;
        }
        var songId = query._id,
            songName = query.name;
        videoService.assignSong(songId, $scope.pushArray.checkbox, function(err, resonse) {
            if (err) {
                toastr.error(err.message, 'Error');
            } else {
                $scope.emptyScope();
                toastr.success('\'' + songName + '\' has been assigned to ' + resonse + ' records', 'Success');
                $scope.pageChanged();
            }
        });
        return true;
    };

    $scope.emptyScope = function() { 
        $scope.autoSongs = null;
    };

它没有在第二次尝试时清除值。我可以单独使用带有回调的自动建议吗？

plunker

Answer 1

我尝试使用 $timeout 来区分 emptyScope() 函数；检查结果是否如你所愿：

var app = angular.module('myApp', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $timeout, songService) {
  $scope.autoSongs = [];

  $scope.loadSongs = function(query) {
    console.log("loadSongs: " + query);
    return songService.autoSuggest(query);
  };

  $scope.songAdded = function(query) {
     console.log("songAdded: " + query);
    var songId = query._id,
      songName = query.name;

    $timeout(function() {
      console.log("$timeout: ");
      $scope.emptyScope();
    });

    return true;
  };

  $scope.emptyScope = function() {
    console.log("emptyScope: ");
    $scope.autoSongs = [];
  };
});

app.factory('songService', function() {
 var autoSuggest = function(autoFilter) {
   console.log("autoSuggest: " + autoFilter);
    if (autoFilter == "i")
      return [{name: 'India',_id: 1}, {name: 'Indonesia',_id: 2},{name: 'Italy',_id: 3}  ];
    else if (autoFilter == "u")
      return [{name: 'United Arab',_id: 4}, {name: 'Uganda',_id: 5},{name: 'USA',_id: 6}  ];
    else
    return [{name: 'Germany',_id: 7}, {name: 'Greece',_id: 8},{name: 'Chezk',_id: 9}  ];
  }
  return {autoSuggest:autoSuggest};
});

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <!--link rel="stylesheet" href="style.css" /-->
  <link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
  <script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <tags-input ng-model="autoSongs" key-property="_id" display-property="name" add-from-autocomplete-only="true" replace-spaces-with-dashes="false" on-tag-adding="songAdded($tag)" on-tag-added="emptyScope()" placeholder="type here to search for album..."
  on-tag-removed="songRemoved($tag)">
    <auto-complete source="loadSongs($query)" min-length="1" debounce-delay="5" max-results-to-show="10"></auto-complete>
  </tags-input>

  <p>Model: {{autoSongs}}</p>
    <p>Search with I or U or else</p>
</body>

</html>

Plunker 也更新了：http://plnkr.co/edit/7nt3toEclsP5HXL7RadP?p=preview

Answer 2

如果您控制台记录 $scope.autoSongs 的值，您会发现它确实是一个 array.
所以你清空值的函数必须是这样的：

$scope.emptyScope = function() {
    //$scope.autoSongs = null;

    $scope.autoSongs = [];
};

工作plunker

PS：另请阅读this关于清空数组的答案。

Answer 3

这个 Plunker 似乎工作得很好。

on-tag-adding="songAdded($tag)"

似乎是您需要触发的唯一事件。

Ng-Tag-Input 指令不清除值

Ng-Tag-Input Directive not clearing value

javascript

angularjs

ng-tags-input