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

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'

这里是Link到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);
          }
      }
    }
});

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

向 angular 应用程序添加模板时，您必须先 "compile" 它。这意味着您从模板创建一个 linking 函数，然后 link 模板到 angular 应用程序，这样您 "tech" angular 这段代码是应用程序的一部分，它需要在摘要周期中考虑它。您可以在此处阅读有关 $compile 的更多信息：$compile

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

Binding click event to an element which is inside the directive's template

javascript

events

directive

angularjs