Question

我正在尝试在指令中添加“运行时”和ng-repeat，并且当在html中作为属性放置时，相同的ng-repeat工作，当从指令添加时它不会。请参阅下面的代码和插件。注意：这是事物的一个非常简化的版本，但正如您所看到的，添加了行（我们只有3行），但值显示为空。感谢。

编辑：我简化了示例以消除实验中可能产生的噪音...

获得的结果：

使用ng-repeat作为属性的列表

ITEM：A001

ITEM：A002

ITEM：A003

注入ng-repeat的列表

ITEM：

Plunker

<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>

Answer 1

在指令定义对象中使用属性scope : {}时，它会创建一个新范围。因此rlfList不属于新范围。

更改为scope:false，以便指令使用其父作用域。

有关指令范围here

的更多信息

AngularJS - ng-repeat从指令注入时不起作用

1 个答案: