Home Isolated scope on template appended to element parent
Reply: 0

Isolated scope on template appended to element parent

user1026
1#
user1026 Published in July 20, 2018, 4:51 am

I have the following directive:

app.directive("mydirective", ['$compile', function($compile) {
    function link(scope, element, attrs, ctrl, $transclude) {
        var actionBtnHTML = `<button type="submit" ng-show="show"></button>`;

        element.parent().append(actionBtnHTML);

        $compile(element)(scope);
    }

    return {
        restrict: 'A',
        scope: {},
        link: link,
        controller: ['$scope', function MyDirectiveController($scope) {
            $scope.show = true;
        }]
}]);

My directive simply adds a button after the HTML tag with the mydirective attribute.

I want that the added HTML has the same scope as the directive (ie. the new isolated scope). But it is not the case in this configuration. I guess this is because the added HTML is outside the directive HTML tag.

Whence my question, how can I apply the isolated scope of my directive on the template appended to parent element?

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.296461 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO