Creating a custom 'require' directive in AngularJs results in an error - defining my own path

Question

Creating a custom 'require' directive in AngularJs results in an error - defining my own path

Imagine having this sample HTML:

<div ng-controller="MyCtrl">    
    <br>
    <my-directive my-name="name">Hello, {{name}}!</my-directive>
</div>

accompanied by a basic controller:

myApp.controller('MyCtrl', function ($scope) {
    $scope.name = 'Superhero';
});

Now in the directive, there is an attempt to change the 'name' using require as shown below:

myApp.directive('myDirective', function($timeout) {
var controller = ['$scope', function ($scope) {
    $scope.name = "Steve";
}];
    return {
        restrict: 'EA',
        require: 'myName',
        controller: controller,
        link: function(scope, element, attrs, TheCtrl) {
            TheCtrl.$render = function() {
                $timeout(function() {
                    TheCtrl.$setViewValue('StackOverflow');  
                }, 2000);                
            };
        }
    };
});

However, an error is thrown stating:

Error: No controller: myName

You can check out the details in this fiddle

On the contrary, if ng-model is used, it actually works. Explore the working example in another fiddle

According to resources like this article, when utilizing 'require' in a directive, a controller needs to be present.

Hence, the question arises:

Is the approach being taken incorrect? Should something else be done instead?

javascript angularjs angularjs-directive

Answer 1

Answer №1

Finally, success!

Essentially, my objective is to achieve 'Communication between directives using controllers'. I came across an informative article that shed light on this topic and guided me through it:

The implementation:

<div ng-controller="MyCtrl">
 <br>
 <my-directive my-name>Hello, {{name}}!</my-directive>
</div>

In the above code snippet, we have two directives: my-directive and my-name. Within my-directive, I invoke a function from the controller of the my-name directive utilizing the require property.

Directive for MyDirective:

myApp.directive('myDirective', function($timeout) {
 return {
  require: 'myName',
  link: function(scope, element, attrs, myNameCtrl) {
   $timeout(function() {
    myNameCtrl.setName("Steve");
   }, 9000);
  } // End of link
 }; // return
});

Directive for MyName:

myApp.directive('myName', function($timeout) {
    var controller = ['$scope', function ($scope) {
        $scope.setName = function(name) {
            $scope.name = name;
            console.log("Inside $scope.setName defined in the directive myName");
        };

        this.setName = function(name) {
            $scope.name = name;
            console.log("Inside this.setName defined in the directive myName");
        };
    }];

    return {
        controller: controller,
        link: function(scope, element, attrs, localCtrl) {
            $timeout(function() {
                localCtrl.setName("Charles");
            }, 3000);
            $timeout(function() {
                scope.setName("David");
            }, 6000);
        }
    };
});

Fascinating approach with effective results. Feel free to experiment by checking out this fiddle.

Additionally, you can establish communication between directives using events. Take a look at this answer on SO for more insights.

Answer 2

Finally, success!

Essentially, my objective is to achieve 'Communication between directives using controllers'. I came across an informative article that shed light on this topic and guided me through it:

The implementation:

<div ng-controller="MyCtrl">
 <br>
 <my-directive my-name>Hello, {{name}}!</my-directive>
</div>

In the above code snippet, we have two directives: my-directive and my-name. Within my-directive, I invoke a function from the controller of the my-name directive utilizing the require property.

Directive for MyDirective:

myApp.directive('myDirective', function($timeout) {
 return {
  require: 'myName',
  link: function(scope, element, attrs, myNameCtrl) {
   $timeout(function() {
    myNameCtrl.setName("Steve");
   }, 9000);
  } // End of link
 }; // return
});

Directive for MyName:

myApp.directive('myName', function($timeout) {
    var controller = ['$scope', function ($scope) {
        $scope.setName = function(name) {
            $scope.name = name;
            console.log("Inside $scope.setName defined in the directive myName");
        };

        this.setName = function(name) {
            $scope.name = name;
            console.log("Inside this.setName defined in the directive myName");
        };
    }];

    return {
        controller: controller,
        link: function(scope, element, attrs, localCtrl) {
            $timeout(function() {
                localCtrl.setName("Charles");
            }, 3000);
            $timeout(function() {
                scope.setName("David");
            }, 6000);
        }
    };
});

Fascinating approach with effective results. Feel free to experiment by checking out this fiddle.

Additionally, you can establish communication between directives using events. Take a look at this answer on SO for more insights.

Creating a custom 'require' directive in AngularJs results in an error - defining my own path

Answer №1

Similar questions

How to make a straightforward task list using ExpressJS

Issues with the functionality of jQuery's .load() method are causing

A step-by-step guide on simulating a click event on an element in React with the help of jest and react-testing

struggling to apply a background color on the canvas with the combination of jspdf and chartjs

Removing Arcs from a Map in Leaflet

Struggling to dynamically append additional textboxes to a <div> element using JavaScript

What is the best way to refresh an angularjs page once the scope has been updated?

While using .map() to display videos from an array, the button ends up playing all videos instead of only the selected

How can one define a function type in typescript that includes varying or extra parameters?

Javascript shows MongoDB array as undefined, though it exists in the database

Using jQuery AJAX in combination with PHP to store data in a MYSQL database

Previewing posts on a single page can be done by following a few

What is the best way to determine the amount of distinct elements in an array of objects based on a specific object property?

Unable to host static content with express

Guide on utilizing async/await in .ts files (Encountering error message: "async functions can only be used when targeting ECMAScript 6 or above")

How can I retrieve the postback element from an updatepanel using JavaScript?

Update the state both before and after executing the API call

Updating the first element with new HTML content within an Angular directive - Here's how!

The JavaScript onClick function is unable to identify the object

How can we display the first letter of the last name and both initials in uppercase on the JavaScript console?