Question

我正在尝试在每个文件夹/目录中显示文件。

我正在使用自定义指令显示每个目录，如下所示（此部分有效）。

但它无法解析自定义模板folderListing.html中的{{file}}变量。有人可以在我出错的地方纠正我吗？

folderListing.js

app.directive('folderListing', function(){
	return {
	    restrict: 'E',
	    scope: {
	    	listing:'='
	    },
	    templateUrl: 'js/directives/folderListing.html'
	};
});


RdaController.js
app.controller('RdaController', ['$scope','RdaService', function($scope,RdaService) {
	
    $scope.folders = ['RDA Server Folder','CTP Outbox', 'CTP Inbox', 'CTP Jobs'];
	$scope.sendToCTP = function(file){
		return RdaService.SendFileToCTP(file);
	};
	$scope.listOfFiles = ['learn_javascript.pdf', 'HTML Made Easy.pdf', 'AngularJS for everybody.pdf'];
	
}]);

index.html
<folder-listing listing="folder" ng-repeat="folder in folders"></folder-listing>


folderListing.html
<div class="row">
<div class="col-md-3" id="{{listing}}">
<table class="table table-striped">
<h3> {{ listing }} </h3>
  	<div class="row">
		<div class="col-md-3" ng-repeat="file in listOfFiles">
			{{file}}
	</div>
</div>
<td><span class="btn-group" role="group"><button type="button" class="btn btn-default" ng-click="sendToCTP(file)">Execute</button></span></td>
</table>
</div>
</div>

Answer 1

有了这个：

scope: {
    listing:'='
},

您创建了一个隔离范围，仅将listing传递给指令。您需要将其更改为：

scope: {
    listing: '=',
    listOfFiles: '=',
    sendToCTP: '&sendToCtp'
},

要传递此功能，您必须在指令中添加send-to-ctp="sendToCTP(file)"属性。但是，在您的模板中，ng-click="sendToCTP(file)"按钮位于ng-repeat之外，因此file始终未定义。

访问自定义模板中的其他范围变量

1 个答案: