Angularjs 当从自定义指令设置元素html时，数据ng单击不起作用

我有一个自定义指令，根据其是否标记为特殊来显示内容：-

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

myApp.directive（'actionSpace'，function（）{
//定义指令对象
var指令={}；
//restrict=E，表示指令是元素指令
directive.restrict='E'；
directive.link=函数（范围、元素、属性）{
控制台日志（scope.typev）；
如果（属性特殊==“1”）{
elem.html（“”）；
}否则{
元素替换为（“”）+
'' +
'' +
'');
}
}
返回指令；
});

---

我可以看到，在控制台中，指令的父作用域是可用的（它打印一个变量），但数据ng click不起作用。

在将插入的html插入元素之前，需要编译插入的html，请参考下面的示例。我使用

$compile

方法使

数据ng单击

工作

var-app=angular.module（'myApp'，[]）；
app.controller（'MyController'，函数MyController（$scope）{
});
应用程序指令（'actionSpace'，函数（$compile）{
//定义指令对象
var指令={}；
//restrict=E，表示指令是元素指令
directive.restrict='E'；
directive.link=函数（范围、元素、属性）{
var html=''
scope.tellMe=function（）{console.log（“telling”）；}
scope.whoWas=function（）{console.log（“这是”）；}
如果（属性特殊==“1”）{
html=''；
}否则{
html=“”+“”+
“是谁？”+
“告诉我”；
}
var el=$compile（html）（范围）；
附加元素（el）；
}
返回指令；
});
在将插入的html插入元素之前，您需要编译它，请参考下面的示例。我使用
$compile
方法使
数据ng单击
工作


var-app=angular.module（'myApp'，[]）；
app.controller（'MyController'，函数MyController（$scope）{
});
应用程序指令（'actionSpace'，函数（$compile）{
//定义指令对象
var指令={}；
//restrict=E，表示指令是元素指令
directive.restrict='E'；
directive.link=函数（范围、元素、属性）{
var html=''
scope.tellMe=function（）{console.log（“telling”）；}
scope.whoWas=function（）{console.log（“这是”）；}
如果（属性特殊==“1”）{
html=''；
}否则{
html=“”+“”+
“是谁？”+
“告诉我”；
}
var el=$compile（html）（范围）；
附加元素（el）；
}
返回指令；
});
不要在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;
});

myApp.directive（'actionSpace'，function（）{
//定义指令对象
var指令={}；
//restrict=E，表示指令是元素指令
directive.restrict='E'；
directive.template=功能（TELM、tAttrs）{
如果（tAttrs.special==“1”）{
返回“”；
}否则{
返回`
`; 
};
}
返回指令；
});

有关详细信息，请参见
在模板函数中编写模板，而不是在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;
});

myApp.directive（'actionSpace'，function（）{
//定义指令对象
var指令={}；
//restrict=E，表示指令是元素指令
directive.restrict='E'；
directive.template=功能（TELM、tAttrs）{
如果（tAttrs.special==“1”）{
返回“”；
}否则{
返回`
`; 
};
}
返回指令；
});

有关详细信息，请参阅