Angularjs 动态元素上未触发角度指令

我有一个指令（DirectiveA），它进行$http调用并创建一个新的html代码

方向a

(function(){
    angular.module('app').directive('directiveA', directiveA);
})();
(function(){
    angular.module('app').controller('DirectiveAController', DirectiveAController);
})();

function directiveA($timeout){
    return {
        restrict: 'E',
        scope: {
            url:'@'
        },
        template: '<div ng-if="template" ng-bind-html="template"></div>',
        link: function ( scope, element, attrs ) {
         scope.element = element;
        },
        controller: DirectiveAController
    };
}

directiveA.$inject = ['$timeout']

function DirectiveAController($scope, $http, $sce){
        $http.get(`${$scope.url}`).then(function(res){
            if(res.success){
                $scope.template = $sce.trustAsHtml(res.template);
            }
        });
}
DirectiveAController.$inject = ['$scope', '$http','$sce'];

响应.模板

<button capture-click></button>

---

呈现response.template的虚拟元素（作为静态内容）并且该指令有效。如何让它在动态呈现的元素上工作。

使用compile my指令被选中

(function(){
    angular.module('app').directive('directiveA', directiveA);
})();
(function(){
    angular.module('app').controller('DirectiveAController', DirectiveAController);
})();

function directiveA($timeout){
    return {
        restrict: 'E',
        scope: {
            url:'@'
        },
        template: '',
        link: function ( scope, element, attrs ) {
         scope.element = element;
        },
        controller: DirectiveAController
    };
}

directiveA.$inject = ['$timeout']

function DirectiveAController($scope, $http, $sce, $compile){
        $http.get(`${$scope.url}`).then(function(res){
            if(res.success){
                var com = $compile(res.template)($scope);
                $scope.element.append(com[0].outerHTML);
            }
        });
}
DirectiveAController.$inject = ['$scope', '$http','$sce', '$compile'];

请注意，这是正确的方法，有任何缺点

(function(){
    angular.module('app').directive('directiveA', directiveA);
})();
(function(){
    angular.module('app').controller('DirectiveAController', DirectiveAController);
})();

function directiveA($timeout){
    return {
        restrict: 'E',
        scope: {
            url:'@'
        },
        template: '',
        link: function ( scope, element, attrs ) {
         scope.element = element;
        },
        controller: DirectiveAController
    };
}

directiveA.$inject = ['$timeout']

function DirectiveAController($scope, $http, $sce, $compile){
        $http.get(`${$scope.url}`).then(function(res){
            if(res.success){
                var com = $compile(res.template)($scope);
                $scope.element.append(com[0].outerHTML);
            }
        });
}
DirectiveAController.$inject = ['$scope', '$http','$sce', '$compile'];