在AngularJS中,“Angular的方法”是什么?
更具体的要求:
当打开一个模态时,将焦点设置在这个模态内预定义的<input>上。 每次<input>变得可见时(例如,通过单击某个按钮),将焦点设置在它上。
我尝试用自动对焦来实现第一个要求,但这只在Modal第一次打开时有效,并且只在某些浏览器中有效(例如在Firefox中它不起作用)。
在AngularJS中,“Angular的方法”是什么?
更具体的要求:
当打开一个模态时,将焦点设置在这个模态内预定义的<input>上。 每次<input>变得可见时(例如,通过单击某个按钮),将焦点设置在它上。
我尝试用自动对焦来实现第一个要求,但这只在Modal第一次打开时有效,并且只在某些浏览器中有效(例如在Firefox中它不起作用)。
当前回答
很容易. .试试这个
html
<select id="ddl00">
<option>"test 01"</option>
</select>
javascript
document.getElementById("ddl00").focus();
其他回答
下面的指令对我来说很管用。对输入使用相同的autofocus html属性。
.directive('autofocus', [function () {
return {
require : 'ngModel',
restrict: 'A',
link: function (scope, element, attrs) {
element.focus();
}
};
}])
以编程方式调用元素上的任何操作:click(), focus(), select()…
用法:
<a href="google.com" auto-action="{'click': $scope.autoclick, 'focus': $scope.autofocus}">Link</a>
指令:
/**
* Programatically Triggers given function on the element
* Syntax: the same as for ng-class="object"
* Example: <a href="google.com" auto-action="{'click': autoclick_boolean, 'focus': autofocus_boolean}">Link</a>
*/
app.directive('focusMe', function ($timeout) {
return {
restrict: 'A',
scope: {
autoAction: '<',
},
link: function (scope, element, attr) {
const _el = element[0];
for (const func in scope.autoAction) {
if (!scope.autoAction.hasOwnProperty(func)) {
continue;
}
scope.$watch(`autoAction['${func}']`, (newVal, oldVal) => {
if (newVal !== oldVal) {
$timeout(() => {
_el[func]();
});
}
});
}
}
}
});
要解决这个问题,最好在controller或ng-init中设置初始化变量:
<input ng-init="autofocus=true" auto-action="{'focus': autofocus}">
我编辑Mark Rajcok的focusMe指令,在一个元素中实现多个焦点。
HTML:
<input focus-me="myInputFocus" type="text">
在AngularJs控制器中:
$scope.myInputFocus= true;
AngulaJS指令:
app.directive('focusMe', function ($timeout, $parse) {
return {
link: function (scope, element, attrs) {
var model = $parse(attrs.focusMe);
scope.$watch(model, function (value) {
if (value === true) {
$timeout(function () {
scope.$apply(model.assign(scope, false));
element[0].focus();
}, 30);
}
});
}
};
});
不确定依赖超时是否是一个好主意,但这适用于ng-repeat,因为这段代码在angularjs更新DOM后运行,所以你要确保所有对象都在那里:
myApp.directive('onLastRepeat', [function () {
return function (scope, element, attrs) {
if (scope.$last) setTimeout(function () {
scope.$emit('onRepeatLast', element, attrs);
}, 1);
};
}]);
//controller for grid
myApp.controller('SimpleController', ['$scope', '$timeout', '$http', function ($scope, $timeout, $http)
{
var newItemRemoved = false;
var requiredAlert = false;
//this event fires up when angular updates the dom for the last item
//it's observed, so here, we stop the progress bar
$scope.$on('onRepeatLast', function (scope, element, attrs) {
//$scope.complete();
console.log('done done!');
$("#txtFirstName").focus();
});
}]);
当打开一个模态时,将焦点设置在这个模态内预定义的<input>上。
定义一个指令,并让它$watch一个属性/触发器,这样它就知道什么时候聚焦元素:
Name: <input type="text" focus-me="shouldBeOpen">
app.directive('focusMe', ['$timeout', '$parse', function ($timeout, $parse) {
return {
//scope: true, // optionally create a child scope
link: function (scope, element, attrs) {
var model = $parse(attrs.focusMe);
scope.$watch(model, function (value) {
console.log('value=', value);
if (value === true) {
$timeout(function () {
element[0].focus();
});
}
});
// to address @blesh's comment, set attribute value to 'false'
// on blur event:
element.bind('blur', function () {
console.log('blur');
scope.$apply(model.assign(scope, false));
});
}
};
}]);
砰砰作响
$timeout似乎需要给模态渲染时间。
“2”。每次<input>变为可见时(例如,通过单击某个按钮),将焦点设置在它上。
创建一个本质上类似于上面的指令。观察某些作用域属性,当它为真时(在ng-click处理程序中设置它),执行元素[0].focus()。根据你的用例,你可能需要也可能不需要$timeout:
<button class="btn" ng-click="showForm=true; focusInput=true">show form and
focus input</button>
<div ng-show="showForm">
<input type="text" ng-model="myInput" focus-me="focusInput"> {{ myInput }}
<button class="btn" ng-click="showForm=false">hide form</button>
</div>
app.directive('focusMe', function($timeout) {
return {
link: function(scope, element, attrs) {
scope.$watch(attrs.focusMe, function(value) {
if(value === true) {
console.log('value=',value);
//$timeout(function() {
element[0].focus();
scope[attrs.focusMe] = false;
//});
}
});
}
};
});
砰砰作响
更新7/2013:我见过一些人使用我最初的隔离作用域指令,然后在嵌入输入字段(即模态中的输入字段)方面出现问题。没有新的作用域(或者可能是新的子作用域)的指令应该可以减轻一些痛苦。所以上面我更新了答案,不使用隔离作用域。以下是原始答案:
原来答案是1。,使用隔离作用域:
Name: <input type="text" focus-me="{{shouldBeOpen}}">
app.directive('focusMe', function($timeout) {
return {
scope: { trigger: '@focusMe' },
link: function(scope, element) {
scope.$watch('trigger', function(value) {
if(value === "true") {
$timeout(function() {
element[0].focus();
});
}
});
}
};
});
砰砰作响。
原来答案是2。,使用隔离作用域:
<button class="btn" ng-click="showForm=true; focusInput=true">show form and
focus input</button>
<div ng-show="showForm">
<input type="text" focus-me="focusInput">
<button class="btn" ng-click="showForm=false">hide form</button>
</div>
app.directive('focusMe', function($timeout) {
return {
scope: { trigger: '=focusMe' },
link: function(scope, element) {
scope.$watch('trigger', function(value) {
if(value === true) {
//console.log('trigger',value);
//$timeout(function() {
element[0].focus();
scope.trigger = false;
//});
}
});
}
};
});
砰砰作响。
由于我们需要重置指令中的trigger/focusInput属性,'='用于双向数据绑定。在第一个指令中,'@'就足够了。还要注意,当使用“@”时,我们将触发器值与“true”进行比较,因为@总是会导致字符串。