没有模板的 Angular 指令 - 从指令分配 ng-click 函数答案

【问题标题】：Angular directive with no template - assign ng-click function from directive没有模板的 Angular 指令 - 从指令分配 ng-click 函数
【发布时间】：2016-03-24 23:32:22
【问题描述】：

如何在应用了我的指令属性的元素上设置 ng-click 功能？在我的指令模板出现问题后，因为它跨越多个 tr，我导致使用 ng-repeat-start/end，即没有模板。所以，我的问题是：将指令元素的内容放入指令的隔离范围的正确方法是什么，以便我可以为其分配值/函数，就好像它是模板一样？

// 控制器作用域

<tr campaign-item ng-repeat-start="campaign in vm.allCampaigns.results | orderBy:vm.params.sort:vm.sortReverse track by $index" ng-if="vm.allCampaigns.totalCount > 0" campaign="campaign" close-preview="vm.hideCampaignPreview()" class="campaign-tr" id="campaign-{{campaign.id}}" ng-class="{'selected': showCampaignDetails}" user-role="{{vm.user.role}}" campaign-options="" campaign-detail="" show-campaign-details="">
  <td>{{ campaign.name }}</td>
  <td>{{ campaign.priority }}</td>
  <td>{{ campaign.status }}</td>
  <td>{{ campaign.createdBy }}</td>
  <td>{{ campaign.approvedBy }}</td>
  <td ng-show="item.releaseDate">{{ campaign.releaseDate * 1000 | date:'short' || ''}}</td>
  <td ng-show="!item.releaseDate"></td>
  <td ng-show="item.expirationDate">{{ campaign.expirationDate * 1000 | date:'short' }}</td>
  <td ng-show="!item.expirationDate"></td>
  <td>
    <select id="campaign-options" name="campaignOptions" class="form-control" ng-model="selectedCampaignOption" ng-options="option for option in campaignOptions track by $index">
    </select>
  </td>
</tr>
<tr class="campaign-description campaign-{{campaign.id}}" ng-show="showCampaignDetails" ng-class="{'selected': showCampaignDetails}">
  <td colspan="8">
    <p> {{ campaignDetails.description }}</p>
  </td>
</tr>

// 指令

angular.module('fotaAdminPortal')
.directive('campaignItem', ['vsmsCampaignFactory', function (vsmsCampaignFactory) {
    return {
        restrict: 'A',
        transclude: true,
        scope: {
            campaign: '=',
            closePreview: '&',
            userRole: '@',
            campaignOptions: '=?',
            showPreview: '=?',
            showCampaignDetails: '=?',
            campaignDetail: '=?'
        },
        // templateUrl: 'app/vsms/admin/campaign/campaign.tpl.html',
        link: function(scope, element, attr, ctrl, transclude) {
            scope.showCampaignDetails = false;
            transclude(scope, function(clone) {
                element.append(clone);
                element[0].addEventListener('click', function(e) {
                    if(e.target.id == 'campaign-options') {
                      return;
                    } else {
                      vsmsCampaignFactory.getCampaign(scope.campaign.id)
                      .then(function(response) {
                          scope.showCampaignDetails = true;
                          scope.campaignDetails = response;
                          console.log(scope);
                      });
                    }
                })
            });
         ...

【问题讨论】：

您可以像fiddle 一样添加点击处理程序。我发布这个不是作为答案，因为我不明白你的问题。如果您可以添加完整的表格标记以及您想对表格执行的操作。也许我可以更好地帮助你。
谢谢，这让我更进一步。只是不清楚在不涉及模板时如何更新范围变量。
我还是不明白为什么你不能使用模板。您可以在标记中添加一个 tbody 标签，然后在其中添加您的指令。（如果这在你的表中是可能的。）
天啊！我不敢相信我忽略了tbody！谢谢一百万，完全解决了我的问题！
不客气。太好了，我可以提供帮助。

标签： angularjs angularjs-directive isolate-scope

【解决方案1】：

您可以像这样从指令中添加ng-click：（如果您提供小提琴或plnkr，我们会更容易测试）

 element.attr("ng-click", "onClick()");

如果控制器上有 onClick() 函数，请添加 controllerName.onClick()

element.attr("ng-click", "vm.onClick()");

然后在最后

$compile(element.contents())(scope);

或

$compile(element)(scope);

【讨论】：

【解决方案2】：

另一种选择是

element.bind('click', function(e) {
  // Handle onclick event here.
});

【讨论】：