angularjs - AngularJS：attrs.$observe 在第一次之后没有触发

Question

jsFiddle在这里

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

我注意到更改$observe时不会触发回调，因此我添加了一个侦听器来显式重置变量，但这也无济于事。submit()isFocusedblur

如何使焦点停留在提交上？

编辑：最后的工作小提琴。改为使用$watch，因为我希望它可以与任意表达式一起使用

Answer 1

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

要从角度了解更改，您需要将任何更改包装在对$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" />）。

这是您更新的 jsFiddle。

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