0

How to connect angular controllers using data from HTML code?

I have a server-side framework, which allows me to build an application by connecting components together. Some of these components get transformed into a bit of HTML markup. Other components only provide data for the first kind of komponents. Technical details of this part are not important.

Example: There are two components on the server VideoPlayer and PlayButton. The PlayButton is connected to VideoPlayer. When page is rendered, VideoPlayer become <div id="the_player" class="flowplayer">...</div> and PlayButton become <button data-player-id="the_player">...</button>. So the on-click handler of the button can use data-player-id to lookup the player and make it play. VideoPlayer ID (the_player) is passed between the components using connections on the server, so it is possible to have two players and multiple buttons, each button controlling only specified player. Notice that these connections are not specified in JavaScript code, so changing of component connections does not affect JavaScript code in any way.

Question: How to do such thing using Angular controllers? The Angular DI is too naive and expects only one instance of each kind of service. I like the two-way binding between controller and HTML DOM, it makes my widgets very simple. But how can I connect such widget to data source addressed in HTML attribute?

Josef Kufner
  • 2,851
  • 22
  • 28

1 Answers1

0

Make your service more flexible and return new Player instances.

app.factory('player',function(){

    var Player = function(){

    };

    Player.prototype.someMethod = function(){

    };

    return{

        getPlayer: function(){
            return new Player();
        }

    };
});
Wottensprels
  • 3,307
  • 2
  • 29
  • 38
  • I'm not really sure what do you mean by this. Can you explain it a little please? How creating a new player helps in connecting to correct instance? – Josef Kufner Feb 08 '14 at 13:31
  • If i understood correctly, you wish for multiple instances of a single service. You could do so by using a factory that exposes an API like the above. – Wottensprels Feb 08 '14 at 13:34
  • Yes, I have multiple instances. But question is, how to connect correct instances together. In some cases such factory must create new instance and in other it must return already existing instance. – Josef Kufner Feb 08 '14 at 13:38
  • So just add every new instance to a list, then expose this list through your API – Wottensprels Feb 08 '14 at 13:39
  • How the factory method will know, which instance is requested? – Josef Kufner Feb 08 '14 at 13:43
  • getInstance: function(instance){ return this.Instances[instance];} – Wottensprels Feb 08 '14 at 13:46