AngularJS:属性$观察第一次之后不要开火

Question

jsFiddle此处

在fiddle中，如果你第一次点击提交按钮，请注意<input>正确聚焦。在随后的点击中，焦点不再设置。

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

我如何使焦点集中在提交上？

编辑：最后一把小提琴。使用$watch，因为我希望它能处理任意表达式

Answer 1

如果您观察元素，您会注意到当模糊回调被触发时，focus-on属性没有设置为false。原因是blur函数在angular的范围之外，所以它不知道你在里面做的改变

要使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，这样更有意义。