CODEWITHSUNDEEP
javascriptangularjs
splash27
splash27

Reputation: 2107

Angular's bindings don't work with elements added in directives

My directive is

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;

            }
        });
    }};
});

But ng-show and bracets {{errorMessage}} ignores connected variables. I always see {{errorMessage}} as text on my page. How to fix?

Upvotes: 1

Views: 71

Answers (1)

RWAM
RWAM

Reputation: 7018

Mentioned in the comments above you must compile the string like this:

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

element.after(content);
…

I've created a plunkr for you: https://plnkr.co/edit/9HKoLg401Thip2cLHYsb?p=preview

Upvotes: 2

Related Questions