1

我有以下代码，当用户移动以编辑其他内容时，我无法从 DOM 中删除先前附加的文本“您现在正在编辑此内容”。任何建议将不胜感激。我也试图避免使用 jQuery，因为我认为它可以通过 jQLite 来实现。非常感谢。

var editApp = angular.module('editApp', ['ngRoute']);

editApp.directive('editInPlace', function() {
  return {
    restrict: 'EA',
    scope: {
      value: '=editInPlace'
    },
    template: '<span ng-click="edit()" ng-bind="value"></span><input ng-model="value"></input>',
    link: function($scope, element, attrs) {
      // Let's get a reference to the input element, as we'll want to reference it.
      var inputElement = angular.element(element.children()[1]);

      // This directive should have a set class so we can style it.
      element.addClass('edit-in-place');

      // Initially, we're not editing.
      $scope.editing = false;

      // ng-click handler to activate edit-in-place
      $scope.edit = function() {
        $scope.editing = true;

        // We control display through a class on the directive itself. See the CSS.
        element.addClass('active');
        element.append('<b class="yaet">You are now editing this</b>');
        // And we must focus the element. 
        // `angular.element()` provides a chainable array, like jQuery so to access a native DOM function, 
        // we have to reference the first element in the array.
        inputElement[0].focus();
      };

      // When we leave the input, we're done editing.
      inputElement.prop('onblur', function() {
        $scope.editing = false;
        element.removeClass('active');
        element.remove('.yaet'); // This is bit that fails
      });
    }
  };
});

editApp.controller('ContactsCtrl', function($scope) {
  $scope.contacts = [{
    number: '+25480989333',
    name: 'sharon'
  }, {
    number: '+42079872232',
    name: 'steve'
  }];
});
.edit-in-place span {
  cursor: pointer;
}
.edit-in-place input {
  display: none;
}
.edit-in-place.active span {
  display: none;
}
.edit-in-place.active input {
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-route.min.js"></script>
<div ng-app="editApp">
  <div ng-controller="ContactsCtrl">
    <h2>Contacts</h2>
    <br />
    <ul>
      <li ng-repeat="contact in contacts">
        <span edit-in-place="contact.number"></span> |
        <span edit-in-place="contact.name"></span>
      </li>
    </ul>
    <br />
    <p>Here we repeat the contacts to ensure bindings work:</p>
    <br />
    <ul>
      <li ng-repeat="contact in contacts">
        {{contact.number}} | {{contact.name}}
      </li>
    </ul>

  </div>
</div>

4

2 回答 2

1

我认为没有 jQuery 是不可能的，因为 jQLite 不知道类的选择器。

还

  element.remove('.yaet'); // This is bit that fails

调用 element.remove() ，函数 remove 没有任何参数，因此您正在删除实际元素。

jquery中的替代方案是

$(".yeat").remove() ，但你调用的是 $(element).remove()。

如果 jQuery 是你的敌人，你应该试试 vanilla JS

 var elements = document.querySelectorAll(".yaet");
 elements.remove();
于 2015-06-28T20:53:33.180 回答
1

您必须.yaet按班级选择并删除它们。由于您想使用 jqLit​​e，您必须手动选择元素，例如：

inputElement.prop('onblur', function() {
    $scope.editing = false;
    element.removeClass('active');
    angular.element(element[0].querySelector('.yaet')).remove();
});


var editApp = angular.module('editApp', ['ngRoute']);

editApp.directive('editInPlace', function() {
  return {
    restrict: 'EA',
    scope: {
      value: '=editInPlace'
    },
    template: '<span ng-click="edit()" ng-bind="value"></span><input ng-model="value"></input>',
    link: function($scope, element, attrs) {
      // Let's get a reference to the input element, as we'll want to reference it.
      var inputElement = angular.element(element.children()[1]);

      // This directive should have a set class so we can style it.
      element.addClass('edit-in-place');

      // Initially, we're not editing.
      $scope.editing = false;

      // ng-click handler to activate edit-in-place
      $scope.edit = function() {
        $scope.editing = true;

        // We control display through a class on the directive itself. See the CSS.
        element.addClass('active');
        element.append('<b class="yaet">You are now editing this</b>');
        // And we must focus the element. 
        // `angular.element()` provides a chainable array, like jQuery so to access a native DOM function, 
        // we have to reference the first element in the array.
        inputElement[0].focus();
      };

      // When we leave the input, we're done editing.
      inputElement.prop('onblur', function() {
        $scope.editing = false;
        element.removeClass('active');
        angular.element(element[0].querySelector('.yaet')).remove();
      });
    }
  };
});

editApp.controller('ContactsCtrl', function($scope) {
  $scope.contacts = [{
    number: '+25480989333',
    name: 'sharon'
  }, {
    number: '+42079872232',
    name: 'steve'
  }];
});
.edit-in-place span {
  cursor: pointer;
}
.edit-in-place input {
  display: none;
}
.edit-in-place.active span {
  display: none;
}
.edit-in-place.active input {
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-route.min.js"></script>
<div ng-app="editApp">
  <div ng-controller="ContactsCtrl">
    <h2>Contacts</h2>
    <br />
    <ul>
      <li ng-repeat="contact in contacts">
        <span edit-in-place="contact.number"></span> |
        <span edit-in-place="contact.name"></span>
      </li>
    </ul>
    <br />
    <p>Here we repeat the contacts to ensure bindings work:</p>
    <br />
    <ul>
      <li ng-repeat="contact in contacts">
        {{contact.number}} | {{contact.name}}
      </li>
    </ul>

  </div>
</div>

于 2015-06-28T20:55:07.950 回答