AngularJS ng-click 在指令动态模板函数中不起作用
AngularJS ng-click not working inside directive dynamic template function
我为内联编辑器创建了一个 Angularjs 目录。 HTML 模板是使用函数创建的,并使用 HTML 根元素进行编译。我的问题是当我点击一个元素来实现切换时,我想改变一个状态变量,但它似乎不起作用。
我已经包含了代码片段以供参考,它写在指令 link 函数中。
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);
}();
请检查代码。我真的很想以这种方式实现。提前致谢!
应将 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);
}();
我为内联编辑器创建了一个 Angularjs 目录。 HTML 模板是使用函数创建的,并使用 HTML 根元素进行编译。我的问题是当我点击一个元素来实现切换时,我想改变一个状态变量,但它似乎不起作用。
我已经包含了代码片段以供参考,它写在指令 link 函数中。
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);
}();
请检查代码。我真的很想以这种方式实现。提前致谢!
应将 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);
}();