Блог

У меня есть директива (directiveA), которая выполняет вызов $ http и создает новый HTML-код.

directiveA

 (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'];
 

это работает нормально.

В новом созданном элементе я хочу захватить функцию щелчка, используя другую директиву.

Директива 2

 (function(){
    angular.module('mcq').directive('captureClick', captureClick);
})();

function captureClick($timeout, $compile){
    return {
       
        link: function ( scope, element, attrs ) {
            console.log("i am called") // Working on page load but not on dynamic element
            
         scope.element = element;
        },

    };
}

captureClick.$inject = ['$timeout', '$compile'];
 

ответ.шаблон

 <button capture-click></button>
 

Отображается фиктивный элемент response.template (как статическое содержимое), и директива работает. Как я могу заставить его работать с динамически отображаемым элементом.

При использовании компиляции моя директива принимается.

 (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'];
 

Обратите внимание, что это правильный путь и имеет какие-либо недостатки