AngularJS ng-click не работает внутри директивы динамической функции шаблона

Question

Я создал каталог Angularjs для встроенного редактора. Шаблон HTML создается с помощью функции и компилируется с корневым элементом HTML. Моя проблема в том, что я хочу изменить переменную состояния, когда нажимаю на элемент, чтобы добиться переключения, но, похоже, он не работает.

Я включил фрагменты кода для справки, которые написаны внутри функции директивной ссылки.

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

        }();

Пожалуйста, проверьте код. Я действительно хочу реализовать этот способ. Заранее спасибо!

Answer 1

Переменная MediaNameEditable должна быть присоединена к области видимости. Попробуй это

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

        }();

или вы можете сделать функцию для переключения 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);

        }();