0

Hello I am a beginner in Angular JS and now I am stuck into something. I have made two modules

Menu and Canvas

Now I have declared a object inside the factory method of Menu module to make it available from Canvas module.

My code is as follow;

var Menu=angular.module("menu",[]);

Menu.factory("Data",['$rootScope', function($rootScope){

    var obj={};
    obj.server="http://localhost:8080";
    obj.transformations=null;
    obj.actions=null;
    obj.sources=null;
    obj.typeSelected=null;

    obj.save = function(data) {
         $rootScope.$broadcast('data:updated',data);
       }

    return obj;
}]);

Now I have a controller that update the values of obj's attributes.

Menu.controller("menuClick",function($scope,Data){

    $scope.obj=Data;

    $scope.clickOnMenu=function(type)
    {
        if(type.indexOf("Source")!=-1)$scope.obj.typeSelected="source";
        else if(type.indexOf("Transformation")!=-1)$scope.obj.typeSelected="transformation";
        else if(type.indexOf("Action")!=-1)$scope.obj.typeSelected="action";

        console.log($scope.obj);

        //added bootstrap here
        angular.bootstrap(document.getElementById("canvascontainer"), ['canvas']);
    }
})

Now when I am creating the Canvas module I am adding dependency of Menu module

var Canvas=angular.module('canvas',['menu']);

Canvas.controller("canvasOperation",["Data",'$scope',function(Data,$scope){

    $scope.obj=Data;

    $scope.clickCanvas=function()
    {
        console.log($scope.obj)
        if($scope.obj.typeSelected!=null)
        {
         console.log("fun started");
        }
    }
}])
 //removed it from here
//angular.bootstrap(document.getElementById("canvascontainer"), ['canvas']);

Now the problem is even after I update the typeSelected value from clickOnMenu method of Menu module the value of typeSelected is not updating in Canvas module and in Canvas module;

console.log($scope.obj.typeSelected)

giving output null.

I tried to explain every details. Can you please tell me where am I doing wrong?

KOUSIK MANDAL
  • 2,002
  • 1
  • 21
  • 46
  • I think when you bootstrap the `canvas` module. Injected `menu` module also load, but the values assign inside `menuClick` will not execute. Did you check if `menu Click` is getting executed when bootstrap the module – Sachila Ranawaka Feb 19 '17 at 04:40
  • No menuClick is being executed only when I click on something. – KOUSIK MANDAL Feb 19 '17 at 04:45
  • so that mean without executing menuClick the values not set in the factory. thats why `$scope.obj.typeSelected` is null initially. – Sachila Ranawaka Feb 19 '17 at 04:49
  • So can you please suggest me how to achieve when the value of obj.typeSelected is changed, I can get it from Canvas module? – KOUSIK MANDAL Feb 19 '17 at 04:53
  • bootstrap the canvas before click on the menuClick – Sachila Ranawaka Feb 19 '17 at 05:00
  • Ok, let me try. – KOUSIK MANDAL Feb 19 '17 at 05:01
  • No luck yet. Take a look at my edited code. It is still showing null. – KOUSIK MANDAL Feb 19 '17 at 05:09
  • angular.bootstrap creates a new $rootScope and a new $injector on the specified element that is different than the $rootscope created by the `ng-app` directive. The `Data` service constructed for the `ng-app` injector is different than the `Data` service constructed on the `canvascontainer` element and its injector. angular.bootstrap shouldn't be called from inside Angular. What are you trying to accomplish here? – georgeawg Feb 19 '17 at 11:54
  • Ok, actually I want when a menu is clicked after that if I click on a div "canvas" something 'll happen once and after that I have to click on menu again. – KOUSIK MANDAL Feb 19 '17 at 12:50

0 Answers0