Question

好的我有一个页面，其中一些输入使用angular x-editable进行管理。

以下指令：

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元素。但第二个是空的，因为它从来没有找到一个元素＆＃34; .editable＆＃34;在这个TD内部，很明显文本从未被选中（事件＆＃34; on＆＃34;未被应用）。

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

你们看到了什么？

Answer 1

正如在docs中所述，jqLite的find()功能是＆＃34;仅限于按标签名称＆＃34;进行查找，这意味着您无法使用它按类选择元素 - 因此您需要使用querySelector。请注意，使用它时，您还需要startingelem[0]而不仅仅是startingelem。

我必须使用angular.element来获取on()绑定的jqLite对象（你可以在那里使用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/

指令＆＃34;链接＆＃34;没有按我的意愿申请

1 个答案: