javascript - Angular 的绑定(bind)不适用于指令中添加的元素

Question

我的指令是

myApp.directive('myRequired', function ($compile, gettextCatalog) {
    return {
        link: function (scope, element, attrs) {
            var noticeContainer = '<div class="inputError" ng-show="showSomeNotices" translate>{{errorMessage}}</div>';
            element.after(noticeContainer);

        scope.$on("submitstart", function (event, data) {
            scope.showSomeNotices = false;
            if (!element.val()) {
                scope.errorMessage = gettextCatalog.getString("Empty field");                
                scope.showSomeNotices = true;

            }
        });
    }};
});

但是 ng-show 和花括号 {{errorMessage}} 会忽略连接的变量。我总是在我的页面上看到 {{errorMessage}} 作为文本。如何修复？

Answer 1

在上面的评论中提到你必须像这样编译字符串:

…
var noticeContainer = '<div class="inputError" ng-show="showSomeNotices" translate>{{errorMessage}}</div>',
    content = $compile(noticeContainer)(scope);

element.after(content);
…

我为您创建了一个 plunkr:https://plnkr.co/edit/9HKoLg401Thip2cLHYsb?p=preview