Question

jsFiddle here

在小提琴中，如果您是第一次点击提交按钮，请注意<input>正确关注。在随后的点击中，焦点不再设置。

我注意到当$observe更改submit()时，isFocused回调没有被触发，所以我添加了一个blur侦听器来显式重置变量但是没有帮助。

如何将焦点放在提交上？

修改：Final working fiddle。使用$watch代替，因为我希望它可以使用任意表达式

Answer 1

如果您观察该元素，您会注意到在触发模糊回调时，focus-on属性未设置为false。原因是blur函数超出了角度的范围，所以它不知道你在其中做出的改变。

要使角度意识到更改，您需要在调用$apply

内包装任何更改

element.bind('blur', function () {
    scope.$apply(function() {
        scope.isFocused = false;
        console.log('blur');
    });
});

http://jsfiddle.net/6vfGm/7/

Answer 2

我认为你不能观察focusOn属性，因为它并不真正作为指令的属性存在。执行<input focus-on='{{isFocused}}' />时，focus-on实际上是您的指令名称。

请改为尝试：

<强> HTML

<div ng-app='foo'>
    <form ng-controller='FormCtrl' ng-submit='submit()'>
        <input focus-on focused='isFocused' />
        <button>Submit</button>
    </form>
</div>

<强>的Javascript

app.directive('focusOn', function () {
    return {
        scope: { focused: '=' },
        link: function(scope, element) {
            scope.$watch('focused', function (newValue) {
                console.log('$watch', newValue)
                if (newValue) {
                    element[0].focus();                    
                }
            });

            element.bind('blur', function () {
                scope.focused = false;
                scope.$apply(); // required so that the scope is updated correctly.
                console.log('blur');
            });
        }
    };
});

app.controller('FormCtrl', function ($scope) {
    $scope.submit = function () {
        $scope.isFocused = true;
        console.log('submit');
    };
});

我创建了一个focused属性来将isFocused属性绑定到指令范围（我本可以将它命名为focusOn，但我想<input type="text" focus-on focus-on="isFocused" />会很奇怪}）。

Here's您更新的jsFiddle。

更新：我将属性名称从ng-model更改为focused，因此更有意义。

AngularJS：attrs。$观察到第一次没有射击

2 个答案: