将点击事件绑定到指令模板内的元素答案

【问题标题】：Binding click event to an element which is inside the directive's template将点击事件绑定到指令模板内的元素
【发布时间】：2017-04-12 12:30:44
【问题描述】：

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

以下是可能有助于理解问题的代码 sn-p：

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

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

【问题讨论】：

您也可以分享您的 HTML 模板吗？因为您似乎在控制器之外附加了#importBtn
您可能想查看 $compile 或 modals：angular-ui.github.io/bootstrap
应该是.append($compile('.......')(scope))
嗨，我创建了一个 Plunkr。 @abhiklpm：我也尝试过。但没有运气
你这样做是为了教育目的还是什么？模态已经在不同的库中实现了多次。

标签： javascript angularjs events directive

【解决方案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);
          }
      }
    }
});

我在这里分叉了你的代码： Plunker

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

【讨论】：