指令调用功能内部的指令不起作用

Question

我有2个指令，一个在另一个中，大小写在最后一个指令中我调用了一个“ng-click”函数，除了没有调用该函数。你能解释一下如何解决这个问题吗？为什么不叫呢？ ...

调用第一个指令，在其中我们调用第二个指令“bg-teste-dois”

(function () {
    'use strict';

    BgTeste.$inject = ['$log', '$compile'];

    angular.module('testeApp').directive('bgTeste', BgTeste);


    function BgTeste($log, $compile) {
        return {
            'restrict': 'E',
            'scope': {
            },
            'replace': true,


            'link': function (scope, element) {

                var builder, compiledElm;

                builder = {
                    'buildTemplate': function (scope, cb) {

                        var template;


                        template =  '<div>' +
                                        '<i class="material-icons" style="color: #fff; margin-top: 4px;">exit_to_app</i>' +

                                        '<bg-teste-dois></bg-teste-dois>' +

                                    '</div>';


                        cb(null, template);
                    }

                };


                builder.buildTemplate(scope, function (err, template) {

                    if (err) {
                        $log.warn(err);
                        return;
                    }

                    compiledElm = $compile(template)(scope);

                    if (builder.postCompile) {
                        builder.postCompile(compiledElm);
                    }

                    element.replaceWith(compiledElm);

                });
            }
        };
    }

}());

调用第二个指令，其中包含对函数q的调用的ng-click在其中：

(function () {
    'use strict';

    BgTesteDois.$inject = ['$log', '$compile'];

    angular.module('testeApp').directive('bgTesteDois', BgTesteDois);


    function BgTesteDois($log, $compile) {
        return {
            'restrict': 'E',
            'scope': {
            },
            'replace': true,


            'link': function (scope, element) {

                var builder, compiledElm;

                scope.acao = this.acao;

                builder = {
                    'buildTemplate': function (scope, cb) {

                        var template;


                        template =  '<div ng-click="acao()"></div>';


                        cb(null, template);
                    },

                    'acao' : function () {
                        console.log('Enter here.....');
                    }

                };


                builder.buildTemplate(scope, function (err, template) {

                    if (err) {
                        $log.warn(err);
                        return;
                    }

                    compiledElm = $compile(template)(scope);

                    if (builder.postCompile) {
                        builder.postCompile(compiledElm);
                    }

                    element.replaceWith(compiledElm);

                });
            }
        };
    }

}());