尝试根据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