невозможно вызвать событие click в шаблоне в директиве angularjs

Question

У вас есть одна общая директива, которая будет отображаться на каждой странице. Уже посещенная страница отображается как сделанная, поэтому я хочу событие click на уже посещенной странице. Я добавил 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

Вы должны компилировать шаблон. Если вы используете угловую директиву, такую ​​как ng-click, и вы просто добавляете их в DOM, они не будут работать из коробки.

Вам нужно сделать что-то подобное в вашей функции ссылка:

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

И не забудьте включить $ службы компиляции в вашей директиве.

Надеюсь, это поможет, дайте мне знать!

Документация по компиляции: https://docs.angularjs.org/api/ng/service/ $ compile