CODEWITHSUNDEEP
angularjs
Tomek Buszewski
Tomek Buszewski

Reputation: 7935

Angular - two components communicating with each other

I'm still trying to understand bindings in Angular and I come with a strong jQuery background, so perhaps I'm totally in the wrong here, but I want to make a component that other components will have access to and will be able to invoke its functions.

For this, I've made an example:

app.component('shadow', {
    bindings: {
        colour: '@'
    },
    controller: function() {
            this.setColour = setColour;

            function setColour(colour) {
                    this.colour = colour;
            }
    },
    template: ['<div ',
        'style="background: {{ $ctrl.colour }}; width: 100px; height: 100px;">',
        '<button ng-click="$ctrl.setColour(\'red\');">Button</button>',
        '<button ng-click="noise.music()">Noise</button>',
    '</div>'].join('')
});

app.component('noise', {
    bindings: {
        name: '='
    },
    controllerAs: 'noise',
    controller: function() {
        this.name = 'Noise';
        this.music = music;

        function music() {
            alert('Merzbow');
        }
    },
    template: ['<div>{{ noise.name }}</div>'].join('')
});

As you can see, I created one component named shadow and one named noise (pun intened). What I want now is to access one directive from another. They are not associated with each other whatsoever.

Upvotes: 1

Views: 2434

Answers (2)

Andrew
Andrew

Reputation: 1534

If you want to create components which will communicate with each other you should create services, not directives. Directive is a component mostly for part of html, or for usage as an attribute on html elements

In all cases, its does not metter what are you using (directives or services) you have to inject one into another so then you can call injected component' methods

UPDATE

How to inject something into something in angular? Using angular dependency injector! Bingo! How to inject? First variant (you specify dependency in component file):

var component = function($scope) {
    // your component code here
};

component.$inject = ["$scope"]

Second variant (you specify dependency during registration component):

var component = function($scope) {
    // your component code here
};

angular.module("yourModule").component("componentName", ["$scope", component]);

How to manipulate the DOM with service? Look, if you really want to work with angular you should forget about jquery principles. There is no need to manipulating the DOM directly from somewhere. You create you view (which could be also a directive), your view has a specified with it controller, you place your addition functionality in services. Thats it! Angular will do all the rest for you. You want display something from server? No problems, call your server, and show that data on your view. How? Just assign it to scope and then populate from that on your view. You want to have some helpers? You can do it with services! Again, forget about jquery and direct DOM manipulation. You work with MVVM framework which based on MVC pattern.

P.S. If want to really understand how angular works look at the angular tutorial. It explains well how to cook angular application

Upvotes: 1

Donovan Charpin
Donovan Charpin

Reputation: 3397

The best way is to create a factory and you include this factory in the both modules. After that, everything in the factory will be shared between the components.

Upvotes: 1

Related Questions