Angularjs 在指令中设置文本框的焦点
我在这里试验内联编辑指令表单: 我想知道如何在单击要编辑的文本时创建的文本框中设置光标。 以下是对模板进行了一些小改动的指令:Angularjs 在指令中设置文本框的焦点,angularjs,Angularjs,我在这里试验内联编辑指令表单: 我想知道如何在单击要编辑的文本时创建的文本框中设置光标。 以下是对模板进行了一些小改动的指令: .directive("clickToEdit", function() { var editorTemplate = '<div class="click-to-edit">' + '<div ng-hide="view.editorEnabled" ng-click="enableEditor()">' +
.directive("clickToEdit", function() {
var editorTemplate = '<div class="click-to-edit">' +
'<div ng-hide="view.editorEnabled" ng-click="enableEditor()">' +
'{{value}} ' +
'</div>' +
'<div ng-show="view.editorEnabled">' +
'<input ng-model="view.editableValue" ng-blur="save()">' +
'</div>' +
'</div>';
return {
restrict: "A",
replace: true,
template: editorTemplate,
scope: {
value: "=clickToEdit",
},
controller: function($scope) {
$scope.view = {
editableValue: $scope.value,
editorEnabled: false
};
$scope.enableEditor = function() {
$scope.view.editorEnabled = true;
$scope.view.editableValue = $scope.value;
};
$scope.disableEditor = function() {
$scope.view.editorEnabled = false;
};
$scope.save = function() {
$scope.value = $scope.view.editableValue;
$scope.disableEditor();
};
}
};
});
指令(“clickToEdit”,函数(){
var editorTemplate=“”+
'' +
“{{value}}”+
'' +
'' +
'' +
'' +
'';
返回{
限制:“A”,
替换:正确,
模板:editorTemplate,
范围:{
值:“=单击编辑”,
},
控制器:功能($scope){
$scope.view={
editableValue:$scope.value,
editorEnabled:错误
};
$scope.enableEditor=函数(){
$scope.view.editorEnabled=true;
$scope.view.editableValue=$scope.value;
};
$scope.disableEditor=函数(){
$scope.view.editorEnabled=false;
};
$scope.save=函数(){
$scope.value=$scope.view.editableValue;
$scope.disableEditor();
};
}
};
});
您需要添加如下链接功能:
link : function(scope, ele, attrs) {
scope.$watch('view.editorEnabled', function(n, o) {
if(n) ele.find('input')[0].focus();
})
}
HTML5属性
autofoucs
?