動態添加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);