無法通過angularjs指令在模板中調用單擊事件

在每個頁面中都有一個通用指令。已訪問過的頁面顯示爲已完成，所以我希望在已訪問的頁面上單擊事件。我添加了ng-click並在控制器中編寫了函數。任何人都可以幫助它爲什麼不起作用。無法通過angularjs指令在模板中調用單擊事件

HTML

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

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（）。有人可以在這裏說出什麼是錯的。

在此先感謝......

來源

2015-03-02 user1514650

您需要編譯該模板。如果您使用Angular指令（例如ng-click）並將其簡單地附加到DOM，它們將無法正常工作。

你需要做這樣的事情在你的鏈接功能：

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

而且不要忘了，包括在指令中的$編譯服務。

希望這有助於，讓我知道！關於$ compile的文檔：https://docs.angularjs.org/api/ng/service/ $ compile

來源

2015-03-02 08:06:41

無法通過angularjs指令在模板中調用單擊事件

回答

相關問題