gpt4 book ai didi

javascript - 指令 "link"不符合我的要求

转载 作者:行者123 更新时间:2023-12-03 11:12:32 25 4
gpt4 key购买 nike

好的,我得到了一个页面,其中包含一些使用 Angular x-editable 管理的输入。

fiddle

以下指令:

treeView.directive('selectWhenEditing',function(){
var linkFunction = function(scope,startingelem,attr)
{
console.log(startingelem[0]);
console.log (startingelem[0].querySelector('.editable'));
angular.element(startingelem[0].querySelector('.editable')).on('click',function(){
//console.log(startingelem[0]);
angular.element(startingelem[0].querySelector('.editable-input').select());
});

};
return{
restrict: 'AEC',
link:linkFunction
};}
);

应该使当我单击可编辑元素时,文本被选中。

以下是页面代码:

<tr ng-repeat="properties in elementToEdit" ng-if="fieldsSettings[$index][1]==1">
<td>
{{ fieldsSettings[$index][0] }}
</td>
<td data-select-when-editing>
<span editable-text="properties.prop" onbeforesave="" ng-if="fieldsSettings[$index][2]== 'text'">
{{ properties.prop || 'empty' }}
</span>
<span editable-select="properties.prop" onbeforesave="" ng-if="fieldsSettings[$index][2]== 'select'" e-ng-options="s.value as s.text for s in fieldsSettings[$index][3]">
{{ selectElement(properties.prop,$index) || 'empty' }}
</span>
</td>
</tr>

这就是相关的已编译 HTML:

<tr class="ng-scope" ng-if="fieldsSettings[$index][1]==1" ng-repeat="properties in elementToEdit">
<td class="ng-binding"> Name </td>
<td data-select-when-editing="">
<span class="ng-scope ng-binding editable editable-click" ng-if="fieldsSettings[$index][2]== 'text'" onbeforesave="" editable-text="properties.prop"> Food </span>
</td>
</tr>

该指令按照我的意愿触发(例如:期望的次数)。第一个 console.log 按预期记录了调用 TD 元素。但第二个为空,因为它从未在该 TD 中找到元素“.editable”,因此显然该文本从未被选择(未应用事件“on”)。

我在另一个页面/模块中做了完全相同的事情,并且效果很好。我正在比较代码,但找不到差异。

你们看到了什么吗?

最佳答案

正如 docs 中所述,jqLit​​e 的 find() 函数是“Limited to Lookups by tag name”,这意味着你不能用它来按类选择元素 - 所以你需要使用 querySelector反而。请注意,使用时您还需要 startingelem[0] 而不仅仅是 startingelem

我必须使用 angular.element 来获取用于 on() 绑定(bind)的 jqLit​​e 对象(您可以在那里使用 plainJS,如下所示),所以它看起来有点丑陋:

angular.element(startingelem[0].querySelector(".editable")).on('click',function(){
startingelem[0].querySelector('.editable-input').select();
});

这是完整的工作版本:http://jsfiddle.net/ar7znuz5/

<小时/>

使用 addEventListener 的纯 JS 版本:

startingelem[0].querySelector(".editable").addEventListener('click',function(){
startingelem[0].querySelector('.editable-input').select();
});

完整工作版本:http://jsfiddle.net/ar7znuz5/1/

<小时/>

最后一个版本,带有选择和更新的原始代码:http://jsfiddle.net/ar7znuz5/7/

关于javascript - 指令 "link"不符合我的要求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27509371/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com