尝试根据textarea变量是否为true在Angular中显示preview。将preview设置为true之后,我也希望将焦点设置为textarea

控制器逻辑

.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>


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

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


我已经调试了代码,一切都按预期执行,包括scope.$watch函数上的回调。但是,textarea不会成为焦点。如果我不使用ngShow指令,则焦点工作正常。下面是两个JSFiddle示例,以显示这两种情况。

焦点不起作用:JSFiddle with ngShow

焦点工作正常:JSFiddle without ngShow

有谁知道使用ngShow并集中显示元素的好方法吗?

最佳答案

使用$ 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

10-05 20:58
查看更多