How to change the scope in Angular in a view which you are not yet in.

Question

I have asked this questions many times without getting too much help on it. So I'm asking now if it's possible to change the values in a scope to a controller in a view which you are not in. When I'm referring to views, I mean different HTML pages.

Lets say, I'm in view 1 which is view1.html. The view has two buttons, button 1 and button 2. If I click on button 1 a new view will appear; view2.html which contains a bold text field for example {{test}} . When I click on button1 I want $scope.test to be "button1". Likewise when I click on button 2 I want the same view to open (view2.html), but this time I want the scope to be "button2" and not "button1".

The reason why I want this is to avoid creating many html pages, since I will have many different values after a while. For example, if I have 10 buttons on the first page (view1.html), I don't want to create 10 html pages in order to have different values for each button you click. I want to have 1 html page that can show different values depending on the button clicked. I'm using Appgyver Supersonic (Steroids) to develop this as an app.

I have tried to show and hide different bold tags, but are never able to do it. As you probably guessed, Im a noob with Angular, but I never receive a straight forward answer which is working in practice even how much I try. So please help, show me a easy example where you create two html page and one js. files, and how I can go from the first html page to the second and still show different values depending on my choice in the first view. Thanks! Below is a example code for what I want to achieve, but in this example the scope is not updated when I click on the buttons, it stays the same.

EXAMPLE CODE

view1.html

<div ng-controller="IndexController">
<button class="button button-block button-assertive" ng-click="button1()" value="checkitems" >
  Button1
</button>
<button class="button button-block button-assertive" ng-click="button2()" value="checkitems" >
  Button2
</button>
</div>

Indexcontroller.js

angular
  .module('legeApp')
  .controller('IndexController', function($scope, supersonic, $filter) {  

$scope.test = 'test';

 $scope.button1= function(){   

     $scope.test= 'button1';

        var view = new supersonic.ui.View("legeApp#view2.html");
        var customAnimation = supersonic.ui.animate("flipHorizontalFromLeft");
        supersonic.ui.layers.push(view, { animation: customAnimation });
    };

 $scope.button2= function(){   

     $scope.test= 'button2';

        var view = new supersonic.ui.View("legeApp#view2.html");
        var customAnimation = supersonic.ui.animate("flipHorizontalFromLeft");
        supersonic.ui.layers.push(view, { animation: customAnimation });
    };
});

View2.html

<div ng-controller="IndexController">
<div class="card">
  <div class="item item-text-wrap">
    Test<b>{{test}} </b>
  </div>
</div>
    </div>

Use a factory to link $scopes across different views. Example & demo code here http://stackoverflow.com/a/25418541/1803298 — cheekybastard, Jan 29 '15 at 06:59

Rebornix · Accepted Answer · 2015-02-01T12:17:19.750

1

You can use $rootScope.$emit and $rootScope.$on to handle communication between different $scope or controller.

angular
  .module('legeApp')
  .controller('IndexController', function($scope, $rootScope, supersonic, $filter) {
    $scope.button1= function(){   
       $rootScope.$emit('myCustomEvent', 'Data to send');
    };

  })
  .controller('IndexController2', function($scope, $rootScope, supersonic, $filter) {
    $rootScope.$on('myCustomEvent', function (event, data) {
      console.log(data); // 'Data to send'
    });
  });

edited Feb 01 '15 at 12:17

answered Jan 29 '15 at 06:50

Rebornix

5,272
1
23
26

Can you please show an example with two different html files. I'm not able to make it work – Thomas M. Tveten Jan 31 '15 at 16:24
@ThomasM.Tveten It seems you are using the same controller in these two different views, can we use different controller for different view? – Rebornix Feb 01 '15 at 02:29
yes no problem. Let's say view2.html has ng-controller="IndexController2". – Thomas M. Tveten Feb 01 '15 at 11:02
@ThomasM.Tveten check it out. I already updated with sample code. – Rebornix Feb 01 '15 at 12:21
I tried it many times but it doesn't work. Can you show me your code, maybe I do something wrong? – Thomas M. Tveten Feb 01 '15 at 15:07
How about creating an Angular sample app with your logic on Plnkr or Jsfiddle then I can help debug? – Rebornix Feb 01 '15 at 23:44
I believe I figured it out. I tried different things in the jsFiddle and was able to discover a flaw in my own code. I will try to fix my own code when I come home from work. What I discovered is that in my code in didn't include "[]" after the module. For example, the correct thing to do is angular.module('myApp', []), and I have angular.module('myApp'). See: http://jsfiddle.net/joshdmiller/HB7LU/ I hope that's the case. The only thing I can't test in the JsFiddle is that I use 2 HTML pages, where in the fiddle, it's only 1. Could you test my example with 2 HTML pages please? – Thomas M. Tveten Feb 03 '15 at 08:35
1

@ThomasM.Tveten check this [demo](http://plnkr.co/edit/vtBKNB?p=preview), then you can have an idea how to send messages between different emails. – Rebornix Feb 03 '15 at 08:59
Hi, thank you very much. Still, that is not the solution I want. I created a Plunker in order to illustrate it. As you can see on the console.log message in my app.js I'm not able to run the $rootScope.$on method. Do you have an idea why? – Thomas M. Tveten Feb 04 '15 at 20:38
Can you provide your Plnkr url? – Rebornix Feb 04 '15 at 23:20

score 0 · Answer 2 · answered Sep 09 '15 at 14:18

0

You can also use the service.

The service provide the global variable.So you can inject the service to different controllers.

answered Sep 09 '15 at 14:18

X Rene

419
2
7

How to change the scope in Angular in a view which you are not yet in.

2 Answers2