javascript - 通过 Angular Directive(指令)删除然后添加元素会破坏输入 [radio] 上的 ng-model

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"
      });
        }
    ]);

它可以很好地满足我的需求，但是当我在包含一些输入 [radio] 按钮的容器元素上使用它时，当元素被添加回来时，我的单选按钮的绑定(bind)中断了。

有没有办法修复我的指令，使绑定(bind)不会中断？

此处示例: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>