AngularJS ng-click在指令动态模板函数中不起作用

时间:2016-04-06 08:33:06

标签: angularjs templates compilation directive angularjs-ng-click

我为内联编辑器创建了一个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);

        }();

请检查代码。我真的想以这种方式实现。提前谢谢!

1 个答案:

答案 0 :(得分:2)

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

        }();