AngularJS ng显示并聚焦

丹·诺兰

尝试textarea根据preview变量是否为true在Angular中显示a 。Afterpreview设置为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示例，以显示这两种情况。

焦点不起作用：带有ngShow的JSFiddle

焦点工作正常：不带ngShow的JSFiddle

有谁知道同时使用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，不需要进行深度监视。

演示小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。