Question

我有一个自定义指令来显示内容，具体取决于是否标记为特殊内容：-

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

我可以在console指令的父范围中看到它的可用范围（它显示变量之一），但是data-ng-click无效。

Answer 1

在将插入的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>

Answer 2

与其在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 Comprehensive Directive API Reference - template

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

2 个答案: