AngularJS utilizes the observe directive to dynamically inherit scope through attribute expressions

Question

AngularJS utilizes the observe directive to dynamically inherit scope through attribute expressions

Here is my simple code:

.controller('Ctrl', ['$scope', '$timeout', function ($scope, $timeout) {
    $timeout(function () {
      $scope.x = 5;
    }, 2000);
  }])
.directive('ngHey', ['$parse', function ($parse) {
    return {
      'restrict': 'A',
      'scope': true,
      'link': function($scope, el, atr) {

        var go = function () {
            if ($parse(atr.ngHey)()) {

              alert('oiiiiiii');
            }
          };

        atr.$observe('ngHey', function (val) {
          if (val) {

            go();
          }
        });
      }
    };
  }]);

//view.html

<div ng-controller="Ctrl">
<span ng-hey="x > 3"></span>
</div>

I want the directive to fire when the expression changes to either true or false, but currently the alert never appears...

It only works if I use:

<div ng-controller="Ctrl">
    <span ng-hey="{{x > 3}}"></span>
    </div>

However, this is not what I desire. I want the directive to handle expressions like ng-if or ng-hide...

Any help or tips would be greatly appreciated, thank you

javascript angularjs angularjs-directive angularjs-scope expression

Answer 1

Answer №1

Instead of using $observe in this situation, consider using $watch on the scope. The $observe function observes an interpolated attribute, as documented here. Here's an example of how to implement it:

.directive('ngHey', ['$parse',
    function($parse) {
        return {
            scope: true,
            link: function($scope, el, atr) {

                var go = function(value) {
                    if (value) {
                        alert('oiiiiiii');
                    }
                };

                $scope.$watch(atr.ngHey, function(val) {
                    if (val) {
                        go(val);
                    }
                });
            }
        };
    }
]);

See a demo here: http://plnkr.co/edit/XakjA2I7lpJdo9YAZFEH?p=preview

UPD. Based on feedback from the original poster, the updated directive now looks like this:

.directive('ngHey', ['$parse',
    function($parse) {
        return {
            scope:{ngHey: '='},
            link: function($scope, el, atr) {

                var go = function(value) {
                    if ($scope.ngHey) {
                        alert('oiiiiiii');
                    }
                };

                $scope.$watch('ngHey', function(val) {
                    if (val) {
                        go();
                    }
                });
            }
        };
    }
]);

It's worth noting how $scope.ngHey is utilized in this context, eliminating the need to $eval the attribute.

See the updated demo here: http://plnkr.co/edit/XakjA2I7lpJdo9YAZFEH?p=preview

Answer 2

Instead of using $observe in this situation, consider using $watch on the scope. The $observe function observes an interpolated attribute, as documented here. Here's an example of how to implement it:

.directive('ngHey', ['$parse',
    function($parse) {
        return {
            scope: true,
            link: function($scope, el, atr) {

                var go = function(value) {
                    if (value) {
                        alert('oiiiiiii');
                    }
                };

                $scope.$watch(atr.ngHey, function(val) {
                    if (val) {
                        go(val);
                    }
                });
            }
        };
    }
]);

See a demo here: http://plnkr.co/edit/XakjA2I7lpJdo9YAZFEH?p=preview

UPD. Based on feedback from the original poster, the updated directive now looks like this:

.directive('ngHey', ['$parse',
    function($parse) {
        return {
            scope:{ngHey: '='},
            link: function($scope, el, atr) {

                var go = function(value) {
                    if ($scope.ngHey) {
                        alert('oiiiiiii');
                    }
                };

                $scope.$watch('ngHey', function(val) {
                    if (val) {
                        go();
                    }
                });
            }
        };
    }
]);

It's worth noting how $scope.ngHey is utilized in this context, eliminating the need to $eval the attribute.

See the updated demo here: http://plnkr.co/edit/XakjA2I7lpJdo9YAZFEH?p=preview

Answer 3

Answer №2

JSFIDDLE DEMO

Due to the delayed setting of the value of x by $timeout, the directive's condition checking for the attribute was always returning false. To address this, implement $watch to monitor changes in x within the go() function.

var myApp = angular.module('myApp',[]);

myApp.directive('ngHey', function () {
    return {
      'restrict': 'A',
       'scope': true,
      'link': function($scope, el, attr) {

        var go = function () {
            if ($scope.$eval(attr.ngHey)) {
              alert('oiiiiiii');
            }
          };

        $scope.$watch('x', function (val) {
          if (val) {
            go();
          }
        });
      }
    };
  });

Replace $parse with $scope.$eval, and similarly replace $observe with $watch.

Answer 4

JSFIDDLE DEMO

Due to the delayed setting of the value of x by $timeout, the directive's condition checking for the attribute was always returning false. To address this, implement $watch to monitor changes in x within the go() function.

var myApp = angular.module('myApp',[]);

myApp.directive('ngHey', function () {
    return {
      'restrict': 'A',
       'scope': true,
      'link': function($scope, el, attr) {

        var go = function () {
            if ($scope.$eval(attr.ngHey)) {
              alert('oiiiiiii');
            }
          };

        $scope.$watch('x', function (val) {
          if (val) {
            go();
          }
        });
      }
    };
  });

Replace $parse with $scope.$eval, and similarly replace $observe with $watch.

AngularJS utilizes the observe directive to dynamically inherit scope through attribute expressions

Answer №1

Answer №2

Similar questions

Update the display using a button without the need to refresh the entire webpage

Limit the length of text using jQuery by specifying the maximum pixel width

Tips for sending a file array together with other string/int variables from JavaScript to PHP

Error: Unable to access the 'login' property of an undefined object

What could be causing my Vue.js sorting array script to malfunction?

What could be causing my JavaScript alert to not appear on the screen?

Obtain the model value using Yii jQuery and then proceed to submit the form

File resolution issue with TypeScript

Set iframe scroll to match the height of the user's screen resolution

What methods can I use to test a Django view that includes a form?

"Debugging a simple demonstration showcasing NodeJS, AngularJS, and Express

What is the best way to integrate a JSON response obtained from $http.get in Angular?

What are the differences between a Chrome app and extension? Is there any other way to access the tabs currently open in your

Modifying the data of a particular object in my rtk asynchronous thunk

What is the method for generating three inputs simultaneously in a single line?

Objects that are not defined in a Gruntfile for a legacy AngularJS project

How can I determine the length of the returned array after a successful jQuery Ajax

What steps can I take to help EventListener locate a specific class if it is experiencing difficulty?

Enhancing the getDate function in JavaScript with additional days

Commit the incorrect file name with the first letter capitalized