AngularJS ng-click not working inside directive dynamic template function

Question

I created an Angularjs directory for an inline editor. The HTML template is created by using function and compiling with the HTML root element. My problem is I want to change a status variable when I click on an element to achieve toggling, but it seems not to be working.

I've included the code snippets for reference, which is written inside a directive link function.

var appendTotemplate = function () {
            var uploadMediaName = "hello";
            var MediaNameEditable = false;

            template = "<a ng-if='MediaNameEditable !=true' ng-click='MediaNameEditable=true'" + uploadMediaName + "</a>" +
                            "<input ng-if='MediaNameEditable==true' type='text' value='" + uploadMediaName + "' id='mediatxt' ng-click='MediaNameEditable=false;' >";
            var linkFn = $compile(template);
            var content = linkFn(scope);
            element.append(content);

        }();

Please check the code. I really want to implement this way. Thanks in advance!

Bettimms · Accepted Answer · 2016-04-06 08:59:44Z

2

The var MediaNameEditable should be attached to scope. Try this

var appendTotemplate = function () {
            var uploadMediaName = "hello";
            scope.MediaNameEditable = false;

            template = "<a ng-if='MediaNameEditable !=true' ng-click='MediaNameEditable=true'" + uploadMediaName + "</a>" +
                            "<input ng-if='MediaNameEditable==true' type='text' value='" + uploadMediaName + "' id='mediatxt' ng-click='MediaNameEditable=false;' >";
            var linkFn = $compile(template);
            var content = linkFn(scope);
            element.append(content);

        }();

or you can make a function to toggle the MediaNameEditable

var appendTotemplate = function () {
            var uploadMediaName = "hello";
            scope.MediaNameEditable = false;

            scope.toggleMediaName = function(isEditable)
            {
              scope.MediaNameEditable = isEditable;
            }

            template = "<a ng-if='MediaNameEditable !=true' ng-click='toggleMediaName(true)'" + uploadMediaName + "</a>" +
                            "<input ng-if='MediaNameEditable==true' type='text' value='" + uploadMediaName + "' id='mediatxt' ng-click='toggleMediaName(false)' >";
            var linkFn = $compile(template);
            var content = linkFn(scope);
            element.append(content);

        }();

edited Apr 6, 2016 at 8:59

answered Apr 6, 2016 at 8:43

Bettimms

6715 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

abhilash Over a year ago

Hey is there any ways to access scope variable inside that template? I want to change that local variables(uploadMediaName ,MediaNameEditable ) and take it from the directive scope . I tried something but it doesn't seems to be working inside the template. But I'm getting the value I checked by using alert dialog.

Bettimms Over a year ago

Bind it to scope as well and use in template scope.uploadMediaName = "hello". This is so because when you compile, you do it with scope (linkFn(scope), so while compiling it tries to find variables used in template if they exist on the scope.

abhilash Over a year ago

ys.I bind with the scope variable. alert is working fine inside the template function but when I attach the value to a html label it isn't displaying the data.

Bettimms Over a year ago

Simulate your case in any of online editors so we can check

Collectives™ on Stack Overflow

AngularJS ng-click not working inside directive dynamic template function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related