javascript - 对通用 ID 的 Angular 访问

Question

我有一些添加新输入的代码，我需要一段时间后(例如 3 秒输入)才能隐藏。问题是如何在每个显示 3 秒后隐藏每个单独的输入。

在 html 代码中我有:

id="{{ 'inputNum-' + $id }}"

在 Javascript 中:

$timeout(function () {
      document.getElementsById('commentNum-' + $id).css('display', 'none');
}, 3000);

https://jsfiddle.net

Answer 1

如果你真的想操作DOM，AngularJS 的方法是编写你的custom directive :

(function(){
  'use strict';
  
  angular
    .module('inputsApp', [])
    .controller('InputsController', InputsController)
    .directive('hideMe', ['$timeout', function ($timeout) {
      return {
        link: function (scope, element, attrs) {
          var timeOut = $timeout(function () {
            angular.element(element).css('display', 'none');
          }, new Number(attrs.hideMe));
          scope.$on('$destroy', function(){
            if (timeOut) $timeout.cancel(timeOut);
          });
        }
      }
    }])
  
  InputsController.$inject = ['$scope', '$timeout'];
  
  function InputsController($scope, $timeout) {
    var vm = this;
    
    // Current input.
    vm.input = {};

    // Array where inputs will be.
    vm.inputs = [];

    // Run when input is submited.
    vm.addInput = function() {

      vm.inputs.push( vm.input );
      vm.input = {};

      // Reset clases of the form after submit.
      $scope.form.$setPristine();
    }

  }

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="inputs-app" ng-app="inputsApp" ng-controller="InputsController as cmntCtrl">

  <div class="inputs">
    
    <!-- Comment -->
    <div class="input" hide-me="2000" ng-repeat="input in cmntCtrl.inputs" id="{{ 'inputNum-' + $id }}">

      <!-- Comment Box -->
      <div class="input-box">
        <div class="input-text">{{ input.text }}</div>
      </div>
    </div>
  </div>

    <!-- From -->
  <div class="input-form">

    <form class="form" name="form" ng-submit="form.$valid && cmntCtrl.addInput()" novalidate>
      <div class="form-row">
        <textarea
                  class="input"
                  ng-model="cmntCtrl.input.text"
                  placeholder="Add input..."
                  required></textarea>
      </div>

      <div class="form-row">
        <input type="submit" value="Add input">
      </div>
    </form>
  </div>

</div>