动态添加ngModels子元素在角指令

Question

有一些指令，取消先前检查收音机组：

(function (angular, $) { 
    'use strict'; 

    var radioGroupDirective = function() { 
     return { 
      restrict: 'EA', 
      require: 'ngModel', 
      link: function($scope, $element, $attrs, ngModelController) { 
       var $radios = $element.find('input[type="radio"]'); 
       $radios.click(function($event) { 
        var $radio = $($event.target); 
        if ($radio.data('waschecked') == true) { 
         $radio.prop('checked', false); 
         $radio.data('waschecked', false); 
         ngModelController.$setViewValue(null); 
        } else { 
         $radio.data('waschecked', true); 
        } 
        $radio.siblings('input[type="radio"]').data('waschecked', false); 
       }); 
      }, 
     }; 
    }; 

    radioGroupDirective.$inject = []; 

    angular.module('radio.group', []).directive('radioGroup', radioGroupDirective); 
})(angular, $); 

用法：

<div radio-group ng-model="fruit"> 
    <input type="radio" ng-model="fruit" value="Apple"/> 
    <input type="radio" ng-model="fruit" value="Banana"/> 
    <input type="radio" ng-model="fruit" value="Mango"/> 
</div> 

它工作正常，但我想删除重复的代码ngModels的子输入。就像这样：

<div radio-group ng-model="fruit"> 
    <input type="radio" value="Apple"/> 
    <input type="radio" value="Banana"/> 
    <input type="radio" value="Mango"/> 
</div> 

所以我尝试ngModel动态编译功能添加到所有的孩子投入

(function (angular, $) { 
    'use strict'; 

    var radioGroupDirective = function ($compile) { 
     return { 
      restrict: 'EA', 
      require: 'ngModel', 
      link: function($scope, $element, $attrs, ngModelController) { 
       var $radios = $element.find('input[type="radio"]'); 
       $radios.click(function($event) { 
        var $radio = $($event.target); 
        if ($radio.data('waschecked') == true) { 
         $radio.prop('checked', false); 
         $radio.data('waschecked', false); 
         ngModelController.$setViewValue(null); 
        } else { 
         $radio.data('waschecked', true); 
        } 
        $radio.siblings('input[type="radio"]').data('waschecked', false); 
       }); 
      }, 
      compile: function (tElement, tAttrs) { 
       var $radios = tElement.find('input[type="radio"]'); 
       angular.forEach($radios, function(radio) { 
        $(radio).attr('ng-model', tAttrs.ngModel); 
       }); 
       return { 
        pre: function preLink(scope, iElement, iAttrs, controller) { 
        }, 
        post: function postLink(scope, iElement, iAttrs, controller) { 
         $compile(iElement)(scope); 
        }, 
       }; 
      }, 
     }; 
    }; 

    radioGroupDirective.$inject = ['$compile']; 

    angular.module('radio.group', []).directive('radioGroup', radioGroupDirective); 

})(angular, $); 

但它会导致一个无限编译循环和死浏览器

Answer 1

你试试从链接函数再次编译整个指令（radioGroup），因此会导致无限循环。 改为只编译输入：

angular.forEach($radios, function(radio) { 
    $compile(radio)(scope); 
}); 

看到这个plunker。

Answer 2

全部工作plunker这个指令（有人谁可以发现它有用）

var radioGroupDirective = function ($compile) { 
     return { 
      restrict: 'EA', 
      require: 'ngModel', 
      compile: function (tElement, tAttrs) { 
       var $radios = tElement.find('input'); 
       angular.forEach($radios, function(radio) { 
        $(radio).attr('ng-model', tAttrs.ngModel); 
       }); 
       return { 
        pre: function preLink(scope, iElement, iAttrs, controller) { 
        }, 
        post: function postLink(scope, iElement, iAttrs, controller) { 
         angular.forEach($radios, function(radio) { 
          $compile(radio)(scope); 
         }); 
         $($radios).click(function($event) { 
          var $radio = $($event.target); 
          if ($radio.data('waschecked') == true) { 
           $radio.prop('checked', false); 
           $radio.data('waschecked', false); 
           controller.$setViewValue(null); 
          } else { 
           $radio.data('waschecked', true); 
          } 
          $radio.siblings('input[type="radio"]').data('waschecked', false); 
         }); 
        }, 
       }; 
      }, 
     }; 
    }; 

radioGroupDirective.$inject = ['$compile']; 

angular.module('radio.group', []).directive('radioGroup', radioGroupDirective);