Question

有一个通用指令，将显示在每个页面中。已经访问过的页面显示为已完成，所以我想要已经访问过的页面上的点击事件。我添加了ng-click并在控制器中编写了函数。任何人都可以帮助它为什么不起作用。

HTML

<div class="row">
    <div class="col-sm-12">
        <wizard-menu currentPage="searchOffering"></wizard-menu>
    </div>
</div>

JS

function generateMenuHtml(displayMenuItems, currentPage, businessType) {
        var htmlOutput = '';
        var indexOfCurrentPage = getIndexOf(displayMenuItems, currentPage, 'pageName');
        if (businessType) {
            htmlOutput += '<ol class="wizard wizard-5-steps">';
        } else {
            htmlOutput += '<ol class="wizard wizard-6-steps">';
        }
        angular.forEach(displayMenuItems, function (value, key) {
            var htmlClass = '';
            if (indexOfCurrentPage > key) {
                htmlClass = 'class="done" ng-click="goToFirstPage()"';
            } else if (key === indexOfCurrentPage) {
                htmlClass = 'class="current"';
            } else {
                htmlClass = '';
            }
            if (key!==1){
            htmlOutput += '<li ' + htmlClass + '><span translate="' + value.title + '">' + value.title + '</span></li>';
            }
        });
        htmlOutput += '</ol>';
        return htmlOutput;
    }
.directive('wizardMenu',['store','WIZARD_MENU', 'sfSelect', function(store, WIZARD_MENU, Select) {
        function assignPageTemplate(currentPageValue){
            var storage = store.getNamespacedStore(WIZARD_MENU.LOCAL_STORAGE_NS);
            var data=storage.get(WIZARD_MENU.LOCAL_STORAGE_MODEL);
            var businessTypePath='offeringFilter.businessType.masterCode';
            var businessTypeValue = Select(businessTypePath, data);

            if(businessTypeValue!=='' && businessTypeValue==='Prepaid'){
                template = generateMenuHtml(businessTypePrepaid, currentPageValue, true);
            }
            else{
                template = generateMenuHtml(commonMenu, currentPageValue, true);
            }
            return template;
        }
        return {
            require: '?ngModel',
            restrict: 'E',
            replace: true,
            transclude: false,
            scope: {
                currentPage: '='
            },
            controller: ['$scope', '$state', '$stateParams', function($scope, $state, $stateParams) {
                $scope.goToFirstPage = function() {
                    console.log('inside First Page');
                };
            }],
            link: function(scope,element,attrs){
                element.html(assignPageTemplate(attrs.currentpage));
            },
            template: template
        };
    }])

我无法调用goToFirstPage（）。任何人都能说出这里有什么问题。

提前致谢....

Answer 1

您需要编译模板。如果你使用Angular指令，例如ng-click，你只需将它们附加到DOM，它们就不会开箱即用。

您需要在链接功能中执行以下操作：

link: function(scope,element,attrs){
                element.append($compile(assignPageTemplate(attrs.currentpage))(scope));
            },

不要忘记在你的指令中包含$ compile服务。

希望这有帮助，让我知道！

$ compile上的文档：https://docs.angularjs.org/api/ng/service/ $ compile

无法在angularjs指令中调用模板中的click事件

1 个答案: