javascript - AngularJS ngShow 和焦点

Question

尝试根据 preview 变量是否为真在 Angular 中显示 textarea。 preview 设置为 true 后，我想将焦点也设置到 textarea 上。

Controller 逻辑

.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.preview = false;
    $scope.showPreview = function() {
        $scope.preview = true;
    }
}])

指令逻辑

.directive('previewFocus', function() {
    return function(scope, element, attrs) {
       scope.$watch('preview', 
         function (newValue) { 
            newValue && element[0].focus();
         },true);
      };    
});

然后我有一个 div，当点击它时，它会触发 showPreview() 方法:

<div ng-click="showPreview()">Add Post</div>

还有一个带有 preview-focus 指令的 textarea:

<textarea class="previewInput" preview-focus></textarea>

我调试了代码，一切都按预期执行，包括 scope.$watch 函数的回调。但是，textarea 没有获得焦点。如果我不使用 ngShow 指令，焦点工作正常。下面是两个 JSFiddle 示例来展示这两种情况。

焦点不起作用:JSFiddle with ngShow

焦点工作正常:JSFiddle without ngShow

有谁知道使用 ngShow 并同时聚焦正在显示的元素的好方法吗？

Answer 1

使用 $timeout:

.directive('previewFocus', function($timeout) {
    return function(scope, element, attrs) {
       scope.$watch('preview', 
         function (newValue) { 
            console.log('preview changed!')
            $timeout(function() {
                newValue && element[0].focus();
            }, 0, false);
         });
      };    
});

这是有效的，因为 $timeout 将 $timeout 中的代码的执行推迟到渲染阶段之后(因此在执行 ng-show 的 $watch 之后，当文本区域变得可见时)

旁注:我删除了 $watch 的第二个参数 - 对于原始变量上的 $watch 不需要深度监视。

Demo Fiddle