我有一个小的角度应用程序，需要列出实体列表（在我的情况下为端点）。实体保存在数组中。就本示例而言，假设它们位于控制器上。
为了更好地分离逻辑，我创建了两个指令：endpointList和endpoint，如下所示：
指令声明如下：
myApp.directive('endpointList', function () {
return {
restrict:'EA',
controller:'EndpointCtrl',
controllerAs:'epCtrl',
transclude: true,
replace: true,
templateUrl: 'endpoint-list.html'
};
})
.directive('endpoint', function ($compile, $log) {
return {
scope: {
scope:'=ngModel',
func:'&',
index:'@'
},
restrict:'EA',
replace:true,
templateUrl: 'endpoint.html',
require:'?^endpointList',
compile: function(tElem, tAtt) {
return function(scope, el, attr, ctrl) {
// ctrl.addResource(scope);
}
}
};
});
的模板 endpoint-list.html
...
<section>
<table class="table table-hover">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="toggleSelectAll()"/></th>
<th>Label</th>
<th>Last updated</th>
<th>Status</th>
<th>Sync</th>
</tr>
</thead>
<tbody ng-transclude></tbody>
</table>
</section>
...
模板endpoint.html：
...
<td>
<a ng-click="sync()" class="glyphicon glyphicon-cloud">CALL ME</a>
</td>
...
我这样使用它们：
<endpoint-list>
<endpoint ng-repeat="ep in endpoints" scope="ep" ng-model="ep" func="selectEp(scope)" index="{{$index}}"></end-point>
</endpoint-list>
我的问题是，在endpoint.html中，我有一个链接，当单击该链接时，我希望它在控制器上调用函数sync（）：
$scope.sync = function(endpoint) {
console.log('syncing:');
console.log(endpoint);
};
我怎样才能做到这一点？任何提示，不胜感激。
这是plunkr：http ://plnkr.co/edit/js7syyZ8u0i9KoOIgwdQ
您可以将服务创建为中间人，然后将其注入控制器和指令中，仅此而已。只要您的控制器具有对服务的引用，您就可以直接从指令的模板中调用该服务的方法。
myApp.service("middleManService", function() {
this.sync = function(endpoint) {
console.log('syncing:');
console.log(endpoint);
};
this.test = 'blah';
this.selectAll = false;
this.deleteBtnVisible = false;
this.editBtnVisible = false;
this.endpoints = [
{
label: '2.2.0',
url: 'https://version-2_2_0-api.company.com/test/test?api_key=xxx',
selected: false
},
{
label: '2.3.0',
url: 'https://version-2_3_0-api.company.com/test/test?api_key=xxx',
selected: false
}
];
};
});
将对此服务的引用添加到您的控制器中：
myApp.controller('EndpointCtrl',
function ($scope, middleManService) {
$scope.middleManService = middleManService;
然后在您的html中，将其命名为：
<td>
<a ng-click="middleManService.sync()" class="glyphicon glyphicon-cloud">CALL ME</a>
</td>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句