当从自定义指令设置元素 HTML 时，data-ng-click 不起作用

>我有一个自定义指令，当取决于它是否标记为特殊时显示内容：-

    myApp.directive('actionSpace', function() {
    //define the directive object
    var directive = {};
    //restrict = E, signifies that directive is Element directive
    directive.restrict = 'E';
    directive.link = function(scope, elem, attr) {
        console.log(scope.typeEv);
        if(attr.special == "1") {
            elem.html("");
        } else {
            elem.replaceWith('<div class="event-list-control"><button class="event-action-btn" data-ng-click="whoWas()"> '+
                        '<i class="fas fa-edit"></i>' +
                        '</button><button class="event-action-btn" data-ng-click="tellMe()">' +
                        '<i class="fas fa-trash-alt"></i></button></div>');
        }
    }
    return directive;
    });

我可以在控制台指令的父范围中看到可用(它打印变量之一(，但 data-ng-click 不起作用。

在插入元素之前，您需要编译插入的 html，请参考以下示例。我使用$compile方法使data-ng-click工作！

var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
});
app.directive('actionSpace', function($compile) {
    //define the directive object
    var directive = {};
    //restrict = E, signifies that directive is Element directive
    directive.restrict = 'E';
    directive.link = function(scope, elem, attr) {
        var html = ''
        scope.tellMe = function(){console.log("telling");}
        scope.whoWas = function(){console.log("this is");}
        if(attr.special == "1") {
            html = '';
        } else {
            html = '<div class="event-list-control"><button class="event-action-btn" data-ng-click="whoWas()">'+ '<i class="fas fa-edit"></i>' +
                        'Who Was</button><button class="event-action-btn" data-ng-click="tellMe()">' +
                        '<i class="fas fa-trash-alt"></i>Tell Me</button></div>';
        }
        var el = $compile(html)(scope);
    
        elem.append(el);
    }
    return directive;
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
    <action-space></action-space>
</div>

不要在 postLink 函数中编写模板，而是在模板函数中编写模板：

myApp.directive('actionSpace', function() {
    //define the directive object
    var directive = {};
    //restrict = E, signifies that directive is Element directive
    directive.restrict = 'E';
    directive.template = function(tElem, tAttrs) {
        if (tAttrs.special == "1") {
            return "";
        } else {
            return `
              <div class="event-list-control">
                <button class="event-action-btn" data-ng-click="whoWas()">
                  <i class="fas fa-edit"></i>
                </button>
                <button class="event-action-btn" data-ng-click="tellMe()">
                  <i class="fas fa-trash-alt"></i>
                </button>
               </div>
            `; 
        };
    }
    return directive;
});

有关更多信息，请参阅 AngularJS 综合指令 API 参考 - 模板

相关内容

最新更新

热门标签：