The command I gave is not being executed

Question

The command I gave is not being executed

I am attempting to replicate the functionality of nsClick with my custom directive by changing its priority. Here is my directive code:

angular.module('MyApp').directive('nsClickHack', function () {
return {
    restrict: 'E',
    priority: 100,
    replace: true,
    scope: {
        key: '=',
        value: '=',
        accept: "&"
    },
    link: function ($scope, $element, $attrs, $location) {
        $scope.method();
    }
}
});

The line I want to bind to is:

<li ng-repeat="item in items" ns-click-hack="toggle(); item.action()">

The functions toggle and item.action belong to other directives.

Could you please help me identify where I may have made a mistake?

javascript angularjs

Answer 1

Answer №1

If you are attempting to replicate the functionality of 'ng-click', it may be beneficial to refer to the source code of the 'ngClick' directive.

For instance, the 'ngClick' directive does not generate an isolate scope since only one isolate scope can be created per element, and it aims to work well with other directives. Instead, it utilizes '$parse' to evaluate the attribute value, which is the approach taken in the default implementation.

If your goal is to create a simplified version of 'ngClick', you could achieve this by using a callback function '&nsClickHack' defined on the scope and triggering it upon clicking the element:

.directive("nsClickHack", function(){
  return {
    restrict: "A",
    scope: {
      clickCb: "&nsClickHack"
    },
    link: function(scope, element){
      element.on("click", function(e){
        scope.clickCb({$event: e}); // ngClick also passes the $event variable
      });
    }
  }
});

To use it as intended, you can do the following:

<li ng-repeat="item in items" ns-click-hack="toggle(); item.action()">

Check out the plunker example here

Answer 2

If you are attempting to replicate the functionality of 'ng-click', it may be beneficial to refer to the source code of the 'ngClick' directive.

For instance, the 'ngClick' directive does not generate an isolate scope since only one isolate scope can be created per element, and it aims to work well with other directives. Instead, it utilizes '$parse' to evaluate the attribute value, which is the approach taken in the default implementation.

If your goal is to create a simplified version of 'ngClick', you could achieve this by using a callback function '&nsClickHack' defined on the scope and triggering it upon clicking the element:

.directive("nsClickHack", function(){
  return {
    restrict: "A",
    scope: {
      clickCb: "&nsClickHack"
    },
    link: function(scope, element){
      element.on("click", function(e){
        scope.clickCb({$event: e}); // ngClick also passes the $event variable
      });
    }
  }
});

To use it as intended, you can do the following:

<li ng-repeat="item in items" ns-click-hack="toggle(); item.action()">

Check out the plunker example here

The command I gave is not being executed

Answer №1

Similar questions

Utilizing jQuery and Bootstrap imports within a JavaScript file

Verifying if checkboxes are selected in PHP using JavaScript

Preventing double clicks in jQuery causing dysfunction in a PHP form function

Adjusting the size of Bootstrap alerts while ensuring the close icon remains correctly positioned

The functionality of Angular Smarttable appears to be currently inactive

Loop through every item in Typescript

Additional forward slash appears within a JSON array

Transforming a DataUrl containing an image into an actual image

Dropdown with multiple selections organized in a hierarchical structure

Adding a fresh element to an array in a mongoDB document

AngularJS filter that retrieves only values that have an exact match

How to iterate through an array of objects in Javascript and extract an array of strings

Adding the API JSON response to the MetaInfo in Vue.js

What is the correct way to implement a callback in the .then() method of Node.js?

Use jQuery to place tags around the content of existing <li> elements

Traversing through an array within a Fetch request

How can I prevent the content from being pushed when the sidebar is opened in JavaScript and CSS? I want to make it independent

What is the process for executing a PATCH request from an HTML form in NodeJS?

observing the value of the parent controller from the UI router state's resolve function

Google Script: How to automatically open a newly created text document after its creation