CODEWITHSUNDEEP
javascriptnode.jsangularjsfirefox-addonfirefox-addon-sdk
CodeMinion
CodeMinion

Reputation: 111

Firefox extension implementing AngularJS

I am trying to use "self.port.emit" in my angular service to send my add-on a result from the UI. The problem is I am not getting any errors so, I am not sure why the panel is not detecting the self.port.

Below is my current folder structure: 

add-on/
    lib/
        toolbar.js
    data/ 
        angularApp/
            app/ 
            scripts/
                controllers/
                    groupCtrl.js
                services/
                    groupservice.js

In my gorupservice.js I have the following code: 

angular.module('angularApp').service('groupservice'), function() {
    this.addGroup = function(name) {
        self.port.emit("newGroupName", name);
    }
}

The groupservice is called by the groupCtrl.js. The function addGroup is being called. In toolbar.js, I have a "self.port.on" listening for the "newGroupName". In toolbar.js, I have 

function createSettingsPanel() {
     var settingsPanel = require("sdk/panel").Panel({
         ...
         contentScriptFile: [data.url("angularApp/app/bower_components/angular/angular.js"),  
         data.url("angularApp/app/scripts/app.js"),
         data.url("angularApp/app/scripts/controllers/groupservice.js")],
     });

     settingsPanel.port.on("newGroupName", function() {
         console.log("MADE IT"); //NOT GETTING HERE!
     }); 
}

If anyone has any experience with angular.js in a Firefox add-on, the help would be greatly appreciated.

Upvotes: 0

Views: 681

Answers (2)

CodeMinion
CodeMinion

Reputation: 111

In the content script(the angular app) use addon.port.emit instead of self.port.emit and it works.

Upvotes: 1

pocesar
pocesar

Reputation: 7050

It's a shot in the dark, but should this code:

angular.module('angularApp').service('groupservice', function() {
    this.addGroup = function(name) {
        self.port.on("newGroupName", name);
    }
}

be

angular.module('angularApp').factory('groupService', function() {
    var groupService;

    groupService.addGroup = function(name) {
        self.port.emit("newGroupName", name);
    }

    return groupService;
}

You looking for a singleton right?

Some questions: is "self" a global variable? Is self.port defined when you inject the service?

Upvotes: 0

Related Questions