Configure and access AngularJS $scope by a third party application

Question

I'm developing an AngularJS application and I would like to integrate some functions to let an other web-application interact with the application. My application should run and triggered on the same website. Iframes are not used.

The application has several tabs, and I would like to set a tab active by specifying it's id.

This has been done in an AngularJS controller, through this method:

$scope.setActiveTab = function(tabId) {
    ribbon.setActiveTab(tabId);

    $scope.$apply();
}

In my application, I have a ng-click attribute and this function is being called in it. But now, I do want a other application to set the active tab by calling some JavaScript function.

Therefore, I've written the following function:

$.fn.OfficeUI.EnableTab = function(element) {
    angular.element($('#OfficeUI')).scope().setActiveTab('tabSendReceive');
}

However, this doesn't work, but when I past this method:

angular.element($('#OfficeUI')).scope().setActiveTab('tabSendReceive');

in the developer console of FireBug or Google Chrome, then it's working.

Any idea on what's wrong and how I should solve this?

Kind regards

lin · Accepted Answer · 2015-01-26 08:18:13Z

1

As I understand you right. You need a application which allows developers (as you said Users :) to interact and configure your application by using HTML/JavaScript. Checkout this plunker demo.

A good approach is to do this with configuration files, global object, or events bindings. The following example shows you, how to let a user configure an a global config object in JavaScript & allows developers to interact with your application. For example by using $scopes.

Controller with global configuration object:

/**
   * Active state holder
   * @type {null|integer} 
   */ 
  var myConfig = {
    menus : {
      mainbar: {
        active: true
      },
      subbar: {
        active: false
      },
      othersubbar: {
        active: false
      }
    }
  };

var OfficeUIRibbon = angular.module('OfficeUIRibbon', [])

OfficeUIRibbon.factory('OfficeUIRibbonFactory', [function() {

      return {
        setActiveTabId: function (tabId) {
          activeTabId = tabId;
        }
      }
}]); 

OfficeUIRibbon.controller('OfficeUIRibbon', ['$scope', '$http', '$animate', function($scope, $http, $animate) {

    //as scope set
    $scope.isVisible = function (name){
      if (myConfig.menus[name].active) {
        return 'active';
      }
    } 

    $scope.activateMenu = function (name) {
      console.log(name);
      if (!myConfig.menus[name].active) {
       myConfig.menus[name].active = true;
      }
    }

    $scope.deactivateMenu = function (name) {
      if (myConfig.menus[name].active) {
       myConfig.menus[name].active = false;
      }
    }


    $scope.listing =  {
        mainbar: {
          id: 1,
          label: 'mainbar'
        },
        subbar: {
          id: 2,
          label: 'subbar'
        }, 
        othersubbar: {
          id: 3, 
          label: 'othersubbar'
        }  
    }
}]);

HTML-Template:

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://code.angularjs.org/1.3.10/angular.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="OfficeUIRibbon">
  <ul>
    <li ng-repeat="(key,list) in listing" ng-class="isVisible(key)">
      {{ list.label }}
    </li> 
  </ul>

  <button ng-click="activateMenu('mainbar');">Activate Mainmenu</button>
  <button ng-click="deactivateMenu('mainbar');">Deactivate Mainmenu</button>
</body> 
</html>

User configuration, should be set before angular was loaded. For example, disable mainbar on default:

myConfig.menus.mainbar.active = false;

answered Jan 26, 2015 at 8:18

lin

18.5k4 gold badges66 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Complexity Over a year ago

Thanks again for your work, but can you tell me why It isn't working when I do it on a click event, and not on a ng-click? I mean that the folllwing code does not work: <a href="#" on-click="myConfig.menus[1].mainbar.active = false;">Activate Mainmenu</a>

lin Over a year ago

"on-click" is not valid attribute. But, if you using "onclick" it will not trigger your $scope, cause "onclick"-event is not watched by angular itself.

Complexity Over a year ago

And it there any way to let angular watch for that event aswell? Because, Let's say that my user have a div element and when they click on it, a tab element should be showed, how should I accomplish that?

lin Over a year ago

The user should insert ng-click="activateMenu('mainbar');"instead of using native Events (onclick). Its such the same, its a attribute which key is different, but same procedure. It is as broad as it is long.

Complexity Over a year ago

I do have an additional question here. In my body, I'm still referencing the controller here. Isn't it needed to execute all this outside of my controlleR?

|

sylwester · Accepted Answer · 2015-01-21 20:37:31Z

1

Please see demo below that should helps you.

var app = angular.module('app', []);

app.controller('firstCtrl', function($scope) {


  $scope.test = function(msg) {


    $scope.$apply(function() {

      $scope.msg = msg

    })

  }

});






$(function() {
  angular.element(document.querySelector('#contoller')).scope().test("Message for Angular from jQuery");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
 
  <div id="contoller" ng-controller="firstCtrl">
    {{msg}}
  </div>
</body>

edited Jan 21, 2015 at 20:37

answered Jan 21, 2015 at 19:47

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

6 Comments

Complexity Over a year ago

Thanks, but It's not what I was looking for. It's working when you call if from within a button, but not when using inside a SCRIPT tag. What if I want to call that method from within a script tag?

maxisam Over a year ago

wow, this is cool ! I don't know SO allows you do things like this.

sylwester Over a year ago

@Complexity what do you means by from inside script tag... please see above I've amended a bit answer

Complexity Over a year ago

Hmm, My code does work right now when I put an alert as the first statement, then the 2nd one is executed aswell. Otherwise it isn't. Any clues?

sylwester Over a year ago

@Complexity .. no idea where is your's 1st and 2nd statement can you please update code

|

squiroid · Accepted Answer · 2015-01-21 19:33:55Z

0

try:-

$scope.apply(function(){
angular.element($('#OfficeUI')).scope().setActiveTab('tabSendReceive');
})

You are in jquery scope you must have to use $scope.apply to reflect it to angular.

answered Jan 21, 2015 at 19:33

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

5 Comments

Complexity Over a year ago

This give me a $scope is not defined. Which seems to make sense. I don't know the variable $scope.

squiroid Over a year ago

$.fn.OfficeUI.EnableTab is not in your controller ..??

Complexity Over a year ago

If I put it in my controller then I get an ' $.fn.OfficeUI.EnableTab is not a function' error.

squiroid Over a year ago

try to put $scope as a dependency in the function don't put it inside the controller. Like:- $.fn.OfficeUI.EnableTab = function(element,$scope) { angular.element($('#OfficeUI')).scope().setActiveTab('tabSendReceive'); }

Complexity Over a year ago

But how should it be called then? Sorry but I quite don't understand.

Collectives™ on Stack Overflow

Configure and access AngularJS $scope by a third party application

3 Answers 3

9 Comments

6 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

6 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related