Connecting a native Angular directive to a function within a custom directive

Question

Connecting a native Angular directive to a function within a custom directive

Is it possible to use ng-mousemove within a custom directive to watch for a mousemove event on the element? How can I make sure that the function passed to ng-mousemove refers to a method on my custom directive's scope? For instance:

HTML

<div my-directive ng-mousemove="go()"></div>

Custom directive:

...
scope: true,
link: function(){
  $scope.go = function () { ... };
}

I understand that I could create an event listener within the directive to monitor the mousemove event, but it seems like this may not be in line with Angular's usual practices.

javascript angularjs angularjs-directive angularjs-scope

Answer 1

Answer №1

Relying on a random function from the directive's scope may not be considered truly encapsulated, but rather quite the opposite. And by the way, that wouldn't work anyhow.

The standard Angular method typically looks something like this

app.directive('myDirective', function () {
  return {
    scope: true,
    transclude: true,
    template: '<div ng-transclude ng-mousemove="doSomething()"></div>',
    link: function (scope){
      scope.doSomething = function () { ... };
    }
  };
});

Answer 2

Relying on a random function from the directive's scope may not be considered truly encapsulated, but rather quite the opposite. And by the way, that wouldn't work anyhow.

The standard Angular method typically looks something like this

app.directive('myDirective', function () {
  return {
    scope: true,
    transclude: true,
    template: '<div ng-transclude ng-mousemove="doSomething()"></div>',
    link: function (scope){
      scope.doSomething = function () { ... };
    }
  };
});

Connecting a native Angular directive to a function within a custom directive

Answer №1

Similar questions

Determine if Param is empty or not within the context of express.js

The behavior of Regex String.split(/s*/) varies between JavaScript and C# programming languages

Use an if-else statement in jQuery with selectors to determine if a specific div element has been added to it

Angular UI-Grid enabling row selection feature

Utilize the split() function to break down a string into separate

Troubleshooting $routeProvider issues in Angular

Sorting by price using the ng-repeat directive is not suitable for this

Ways to permanently change a javascript array object

What is preventing my textbox from accepting decimal points?

Having trouble accessing env variables from React Component in Next.js?

Ways to navigate to a different page while displaying an alert message?

Run a PHP script that creates a PDF file using jQuery AJAX

Is it possible to modify the state of a function component from a different function in React?

IE9 presents a frustrating issue where the jQuery select box value is returning as

The combination of jQuery and JavaScript targeting the element with the ID '#update1' is essential. Can someone please assist me with

Animating CSS styles in Vue.js based on JavaScript triggers

Web API - Unable to retrieve resource: the server returned a status code of 404

Identify the difference between a regular function and a constructor in JavaScript

What is the reason behind Node.js querystring.parse() producing an object that does not have JavaScript `Object` inheritance?

When attempting to render a base64 image, it is currently returning as empty