將單擊事件綁定到指令模板中的元素

我想製作一個可重用並因此創建指令的通用組件，但問題是我無法找出觸發的方法&捕獲指令內使用的模板內的元素的點擊事件。將單擊事件綁定到指令模板中的元素

以下是代碼片段可以在瞭解問題的幫助：

myApp.directive('importPopup', function ($timeout) { 
    return { 
     restrict: 'E', 
     template: '<button class="btn btn-primary save-btn floatLeft">Import 
    </button>', 
     scope: {}, 
     link: function(scope, element, attrs) { 
      element.bind('click', function(){ 
       angular.element('body').append(' 
       <div class="popupContainer"> 
         <button> x </button> 
         <div> 
          Enter Number: <input type="text" ng-model="noToImport"> 
         </div> 
         <button type="button" id="importBtn" ng-click="importClick()">Import</button> 
       </div>'); 
      }); 
      scope.importClick = function() { 
       console.log(' import document for Rule no - ' + scope.noToImport); 
      } 
     } 
    } 
});

我無法

1）觸發#importBtn

的點擊

2），也是事件無法獲取模型的值 - 'noToImport'

這裏是鏈接到Plunkr

任何幫助將不勝感激。在此先感謝。

來源

2017-04-12 Janak

你能分享你的HTML模板嗎？因爲它看起來好像在控制器之外追加了#importBtn –

您可能想看看$ compile或模態：https://angular-ui.github.io/bootstrap – Groben

它應該是.append（$ compile（ '.......'）（範圍）） – abhiklpm

試試這個：

var app = angular.module('MainApp',[]); 
    app.directive('importPopup',function ($compile) { 
    return{ 
     restrict: 'E', 
     template: '<button class="btn btn-primary save-btn floatLeft">Import </button>', 
     link: function(scope, element, attrs) { 
     element.bind('click', function(){ 
       angular.element(document).find('body').append($compile('<div class="popupContainer"><button> x </button><div>Enter Number: <input type="text" ng-model="noToImport"></div><button type="button" id="importBtn" ng-click="importClick()">Import</button></div>') 
      (scope)) 
      }); 
      scope.importClick = function() { 
       console.log(' import document for Rule no - ' + scope.noToImport); 
      } 
     } 
    } 
});

我在這裏分叉代碼： Plunker

當添加模板的角度應用程序，你必須先「編譯」它。這意味着你從你的模板創建一個鏈接函數，然後將模板鏈接到角度應用程序，通過你的「技術」角度來看這個代碼是應用程序的一部分，它需要在摘要循環中考慮它。你可以在這裏閱讀更多關於$ compile的內容：$compile

來源

2017-04-12 14:16:07

謝謝隊友！這對我有效.... – Janak

將單擊事件綁定到指令模板中的元素

回答

相關問題