角度突出显示/选择<div>元素Angular </div>中的所有内容

时间:2014-08-22 18:18:43

标签: angularjs angularjs-directive

如何使用Angular JS突出显示并选择元素内的所有内容? 使用inputbox很容易。但我们如何为元素做。

帮助将不胜感激。

谢谢

这是我到目前为止所使用的。

HTML

<div ng-controller="appController" ng-app="app">
    <input type="text" ng-model="content" ng-click="onTextClick($event)" />
</div>

JS

var app = angular.module('app', []);
  app.controller('appController',
    function ($scope) {
        $scope.content = 'test';
        $scope.onTextClick = function ($event) {
            $event.target.select();
        };
    });

http://jsfiddle.net/onury/R63u5/

1 个答案:

答案 0 :(得分:7)

jsfiddle:http://jsfiddle.net/n63LhtcL/3/

这是一个实现它的更新指令:

.directive('selectOnClick', function ($window) {
    return {
        link: function (scope, element) {
            element.on('click', function () {
                var selection = $window.getSelection();        
                var range = document.createRange();
                range.selectNodeContents(element[0]);
                selection.removeAllRanges();
                selection.addRange(range);
            });
        }
    }
});

您的加价:

<div select-on-click>
    Some text...
    <input type="text" ng-model="content"  />
</div>