Question

我创建了一个自定义指令来切换DOM中的元素。它类似于ng-show，但是使用实际的dom操作而不是通过样式隐藏。由于超出此问题范围的原因，我无法使用ng-show。

angular.module('myApp')
    .directive('daKeep', [
        function () {
      function link($scope, element, attributes) {

            var cacheElement, insertionElement;

            // the TRUTHY expression to watch
            var expression = attributes.daKeep;

            function removeElement() {
              if (insertionElement === undefined) {
                insertionElement = element.prev();
                cacheElement = element;
                element.remove();
              }
            }

            function addElement() {
              if (insertionElement !== undefined) {
                insertionElement.after(cacheElement);
                insertionElement = undefined;
              }
            }

            if (!$scope.$eval(expression)) {
              removeElement();
            }

            // watch the expression in $scope context to see when it changes
            $scope.$watch(expression, function (newValue, oldValue) {
            // Ignore first-run values since we've
            // already defaulted the element state
            if (newValue === oldValue) {
              return;
            }

            // Show element
            if (newValue) {
              addElement();
            } else {
              removeElement();
            }
          });
        }

      // Return the directive configuration.
      return ({
        link: link,
        restrict: "A"
      });
        }
    ]);

它可以满足我的需求，但当我在容纳某些输入[收音机]按钮的容器元素上使用它时，我的单选按钮的绑定在元素被添加回来时就破坏了。

有没有办法修复我的指令，所以绑定不会破坏？

此处示例：plunker

Answer 1

为什么不使用ng-if而不是自定义指令？它与ng-show的作用相同，但它不是应用样式，而是删除或重新创建DOM。

  <div ng-if="keepRadioButtons">
    <input type="radio" ng-value="true" ng-model="selectedValue" />Yes
    <input type="radio" ng-value="false" ng-model="selectedValue" />No
  </div>

Answer 2

最初的问题是你调用element.remove()来删除jQuery或jQLite集合的数据角度附加以进行绑定。

ng-if是另一种选择，但要严格解决您的问题，请致电detach而不是remove。

删除然后通过角度指令添加元素打破输入[radio]上的ng-model

2 个答案: