在动态创建的对象上使用$ compile服务

Question

我试图让ng-click处理一系列动态创建的按钮，我在之后：

• 迭代对象中的项目
• 找到特定的匹配
• 用html string替换它们

（有关详细信息，请参阅this）

我知道我需要使用$ compile服务来完成这项工作，但我不知道如何从我到目前为止看到的示例中将它实现到我的代码中。知道怎么样？目前，没有任何事情发生......

短语-list.html

<ion-view view-title="{{ category }}">
  <ion-content>

    <div class="list">
      <a class="item item-text-wrap item-line-height" ng-bind-html="e.phrase_filter" ng-repeat="e in phraseList = (categoryDetail | orderBy:'phrase_filter')">
      </a>
    </div>

  </ion-content>
</ion-view>

controllers.js

/**
*
*/
function PhraseListCtrl($scope, $stateParams, CategoryService, ModalService) {

    $scope.categoryId = $stateParams.categoryId;
    $scope.category = $stateParams.category;

    CategoryService.getCategoryDetail($scope.categoryId).then(function(dataResponse) {
        $scope.categoryDetail = dataResponse.data;

        var replacers = CategoryService.getCategoryFilter();

        $scope.categoryDetail.forEach(function(e){
            Object.keys(replacers).forEach(function(key){
                e['phrase_filter'] = e['phrase_filter'].replace(new RegExp(key, 'g'), replacers[key]);
            })
        })

    })

    // Modals

    var vm = $scope;

    $scope.phraseItemModal = function() {
            ModalService.show('templates/modals/phrase-item.html', 'PhraseListCtrl as vm');
        }

}

services.js

/**
*
*/
function CategoryService($http) {

    this.getCategoryList = function () {

        return $http({
            method: 'GET',
            url: 'http://dingocv.herokuapp.com/api/category/',
        });

    }


    this.getCategoryDetail = function (categoryId) {

        return $http({
            method: 'GET',
            url: 'http://dingocv.herokuapp.com/api/category/' + categoryId,
        });

    }

    this.getCategoryFilter = function () {

        var replacers = {
            '{{group}}' : '<a ng-click="phraseItemModal()" class="button button-small button-outline button-positive button-side-padding">group</a>',
            '{{attribute}}' : '<a class="button button-small button-outline button-assertive button-side-padding">attribute</a>',
            '{{factor}}' : '<a class="button button-small button-outline button-assertive button-side-padding">factor</a>',
            '{{person}}' : '<a class="button button-small button-outline button-positive button-side-padding">person</a>'
        }

        return replacers;

    }

}