Question

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

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

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）并且无法获取模型的值 - ＆＃39; noToImport ＆＃39;

以下是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

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

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

1 个答案: