The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

Misa (43) [Avatar] Offline
#1
As many others have pointed out, the sample code in Listing 1.10 (the Hello World example) still does not work. In an earlier thread users posted fixes that solve the problems, but even after those fixes are in place there are still a couple of cosmetic issues:
- Focus is not set on the <input> field containing "World" when the page is loaded.
- The text "World" is not selected.

Ideally, when the page is opened, focus would be set on the <input> field, and its default content ("World") would be selected, so the user would not have to clear the field before entering their own value.

Adding autofocus="autofocus" for the <input> field resolves both issues in Opera. However, in IE, Firefox and Chrome even though the field gets focus the existing content of the field is still not selected. Also, IE places the cursor to the left of the text, but Chrome and Firefox place the cursor to the right of the text. Obviously we want consistent behavior in all browsers.

Can these issues be resolved with AngularJS, or do we have to write JavaScript to address them?
Misa (43) [Avatar] Offline
#2
Re: Cursor positioning for Hello Angular example in Listing 1.10
I eventually managed to select the text of the input field when the page is loaded (listing 1.10), but it's not trivial. I had to create two AngularJS directives: one to set focus on the input field, and another to select the text in the field with focus.

<input type="text" ng-model="person" set-focus select-on-focus>

The JavaScript code is listed below.

<script>
var app = angular.module('helloApp', []);

app.controller('HelloCtrl', function ($scope) {
$scope.greeting = 'Hello';
$scope.person = 'World';
});

app.directive('selectOnFocus', function () {
return {
restrict: 'A',
link: function (scope, element) {
element.on('focus', function () {
this.select();
});
}
};
});

app.directive('setFocus', function($timeout) {
return {
restrict: 'A',
link: function(scope, element) {
$timeout(function(){
element[0].focus();
}, 0);
}
};
});
</script>