将单击事件绑定到指令模板内的元素

Question

我想创建一个可以重用的通用组件，因此创建了一个指令，但问题是我无法找到一种方法来触发和捕获指令内使用的模板内元素的点击事件。

以下是可能有助于理解该问题的代码片段：

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的链接

任何帮助将不胜感激。提前谢谢。

Answer 1

试试这个：

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);
          }
      }
    }
});

我在这里分叉了你的代码： 普伦克

将模板添加到角度应用程序时，必须首先"编译"它。这意味着您从模板创建一个链接函数，然后将模板链接到角度应用程序，通过"技术"角度，此代码是应用程序的一部分，并且需要在摘要周期中考虑它。您可以在此处阅读有关$compile的更多信息：$compile