问AngularJS -ng-当从指令注入时，重复不起作用

EN

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript">
	angular.module('rlfList', []);

	angular.module('rlfList').directive('rlfItem', ['$compile', function ($compile) {
		return {
			restrict: 'EA',
			scope: false,
			link: function link(scope, element, attrs) {
				if (!element.hasClass('rlfListRow')) {
					element.addClass('rlfListRow');
					element.attr('ng-repeat', 'item in records');
					$compile(element)(scope);
				}
			}
		};
	}]);

	angular.module('rlfList').controller('rlfController', ['$scope', '$timeout', function ($scope, $timeout) {
		
		$scope.records = [];
				
		$scope.records[0] = { number: 'A001' };
		$scope.records[1] = { number: 'A002' };
		$scope.records[2] = { number: 'A003' };

	}]);
</script>

<div ng-app="rlfList" ng-controller="rlfController">
      
      <div style="margin-top: 20px;">LIST with ng-repeat as attribute</div>
	    <div ng-repeat="item in records"><span>ITEM : {{ item.number }}</span></div>

	    <div style="margin-top: 20px;">LIST with ng-repeat injected</div>
	    <div rlf-item><span>ITEM : {{ item.number }}</span></div>

    </div>