The ng-show directive is failing to update properly after changes are made to the scope values

Question

The ng-show directive is failing to update properly after changes are made to the scope values

I'm experiencing some issues with the ng-show method. I have set it up like this:

Even though the username string length is checked, the ng-show method doesn't seem to hide/show the extra text until after another keystroke. How can I make it update the visibility of the username helper text on key up?

If you take a look at the JSFiddle http://jsfiddle.net/FkAkg/8/

           accountApp.directive("stripCharacters", ['$filter', '$http', function($filter, $http) {
            return {
                restrict: 'C',
                link: function(scope, element) {
                    element.bind("keyup", function() {
                        if(scope.account.username !== undefined) {
                            element.val($filter('stripCharacters')(scope.account.username));
                            if(scope.account.username.length > 2) {
                                scope.toggleShowUsername(true); 
                                scope.usernameMessage = scope.account.usernameAvailable;
                            } else {
                                scope.toggleShowUsername(false);
                            }
                        }
                    });
                }
            }
        }]);

I managed to get it working by using jQuery hide/show on the same element, but I'd prefer to have it functioning in Angular only.

Cheers

javascript angularjs

Answer 1

Answer №1

Expanding on pkozlowski's input...

In my opinion, you might have been attempting to accomplish too many tasks within one directive. What is the main purpose of this directive? From its name, it seems to be focused on "stripping characters"... however, upon closer inspection, it appears that you are not only stripping characters but also executing methods and updating display logic for elements outside of the directive itself.

My suggestion would be to simplify the directive and delegate other functionalities to a $watch:

Check out an updated version on JSFiddle

Here is the relevant code snippet:

I have included the following in your controller...

$scope.$watch('account.username', function (value) {
   if (value.length > 2) {
      $scope.toggleShowUsername(true);
      $scope.usernameMessage = $scope.account.usernameAvailable;
   } else {
      $scope.toggleShowUsername(false);
   }
});

Next, your directive code:

accountApp.directive("stripCharacters", ['$filter', function ($filter) {
   return {
      restrict: 'C',
      require: 'ngModel',
      link: function (scope, element, attrs, ngModel) {
            ngModel.$parsers.unshift(function (value) {
               var stripped = $filter('stripCharacters')(value);
               element.val(stripped);
               return stripped;
            });
      }
   }
}]);

To clarify, Mark Rajcok's approach would also be suitable here and may be more preferable for you... although it lacks one element: $setViewValue. In that case, you would adjust the linking function of the directive as follows:

link: function (scope, element, attrs, ngModel) {
    element.bind('keyup', function () {
       var value = element.val();
       var stripped = $filter('stripCharacters')(value);
       element.val(stripped);
       ngModel.$setViewValue(stripped);
       scope.$apply();
    });
}

The use of $setViewValue ensures that your model reflects the correct value. Here's a JSFiddle with that solution implemented;

I trust that this information proves beneficial.

Answer 2

Expanding on pkozlowski's input...

In my opinion, you might have been attempting to accomplish too many tasks within one directive. What is the main purpose of this directive? From its name, it seems to be focused on "stripping characters"... however, upon closer inspection, it appears that you are not only stripping characters but also executing methods and updating display logic for elements outside of the directive itself.

My suggestion would be to simplify the directive and delegate other functionalities to a $watch:

Check out an updated version on JSFiddle

Here is the relevant code snippet:

I have included the following in your controller...

$scope.$watch('account.username', function (value) {
   if (value.length > 2) {
      $scope.toggleShowUsername(true);
      $scope.usernameMessage = $scope.account.usernameAvailable;
   } else {
      $scope.toggleShowUsername(false);
   }
});

Next, your directive code:

accountApp.directive("stripCharacters", ['$filter', function ($filter) {
   return {
      restrict: 'C',
      require: 'ngModel',
      link: function (scope, element, attrs, ngModel) {
            ngModel.$parsers.unshift(function (value) {
               var stripped = $filter('stripCharacters')(value);
               element.val(stripped);
               return stripped;
            });
      }
   }
}]);

To clarify, Mark Rajcok's approach would also be suitable here and may be more preferable for you... although it lacks one element: $setViewValue. In that case, you would adjust the linking function of the directive as follows:

link: function (scope, element, attrs, ngModel) {
    element.bind('keyup', function () {
       var value = element.val();
       var stripped = $filter('stripCharacters')(value);
       element.val(stripped);
       ngModel.$setViewValue(stripped);
       scope.$apply();
    });
}

The use of $setViewValue ensures that your model reflects the correct value. Here's a JSFiddle with that solution implemented;

I trust that this information proves beneficial.

Answer 3

Answer №2

If you want the keyup handler to work smoothly with Angular, make sure to include scope.$apply() in your code so that Angular can detect changes in showUsername:

...
if(scope.account.username.length > 2) {
   scope.toggleShowUsername(true); 
   scope.usernameMessage = scope.account.usernameAvailable;
} else {
   scope.toggleShowUsername(false);
}
scope.$apply();

This information should answer your question, but I also suggest looking into @pkozlowski.opensource's response for more insights.

Answer 4

If you want the keyup handler to work smoothly with Angular, make sure to include scope.$apply() in your code so that Angular can detect changes in showUsername:

...
if(scope.account.username.length > 2) {
   scope.toggleShowUsername(true); 
   scope.usernameMessage = scope.account.usernameAvailable;
} else {
   scope.toggleShowUsername(false);
}
scope.$apply();

This information should answer your question, but I also suggest looking into @pkozlowski.opensource's response for more insights.

The ng-show directive is failing to update properly after changes are made to the scope values

Answer №1

Answer №2

Similar questions

Adaptively linking to the property of a deeply nested object

Is there a way to manually trigger a re-render of all React components on a page generated using array.map?

There has been an issue with parsing the JSON file due to an invalid character found at

Creating sophisticated TypeScript AngularJS directive

Custom-designed background featuring unique styles

An error has occurred: Unable to access the property "filter" as it is undefined

exploring the capabilities of sockets in PHP, reminiscent of the functionality found in Node.js

Utilizing jsPDF and html2canvas in a Vue.js application (no webpack involved)

Charts created using Google VisualizationORThe visual representations

Ways to transition into a developer role

Use Javascript to conceal a div element if there are no links present

Is the form validation failing to update after an item is removed from the model? Possible bug detected?

I encountered an error with no matching overload when attempting to make a call using the Tanstack query function

Learn how to extend components in Typescript and determine necessary arguments. Discover how to apply this knowledge in an Angular use case by extending mat-side-nav

Whenever I try to import a directory that contains modules, Webpack encounters an error

Increase the gap between the legend and the chart when utilizing charts.js

Troubleshooting HTTP Response Body Encoding Problem in Node.js

Capture all URLs containing [...slug] and generate static props only for valid addresses in Next.js

What is the best way to divide an array into pairs and store them in separate arrays?

What is the best way to display a loading image and temporarily disable a button for 3 seconds before initiating the process of sending post data from another page via