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-06T08:59:44.010

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

        }();

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. — abhilash, Apr 07 '16 at 04:11
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. — Bettimms, Apr 07 '16 at 04:14
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. — abhilash, Apr 07 '16 at 04:50

AngularJS ng-click not working inside directive dynamic template function

1 Answers1