AngularJs :: Share data between Views and parameters

Question

I'm creating an App with Ionic Framwork. The Front is ok, and I made the view transitions using $stateProvider.

But I need to do the APP features and other functionalities. I have 2 major problems

1) Pass parameters through href=""

2) Execute some functions after the view transition e when the data is processed show the info on the new View.

Couldn't go further because I'm newbie at Angular and the other examples I searched were not specific. That's what I got so far::

INDEX.HTML

<body ng-controller="AppController as controller">
<ion-view title="View1"><ion-content>
   <a href="#/view2" ng-click="controller.test1">
      <button class="button-style">TEST 1</button>
   </a>
   <a href="#/view2" ng-click="controller.test2">
      <button class="button-style">TEST 2</button>
   </a>
</ion-content></ion-view>
...

View2.HTML

<ion-view title="View2"><ion-content>
   <input type="text" value="{{controller.parameter}}" />
</ion-content></ion-view>

APP.JS

app.config( function($stateProvider, $urlRouterProvider){
    $stateProvider
        .state('view2',{
            url:'/view2',
            templateUrl:'views/view2.html'
    })

...

app.controller('AppController', ['$scope', function($scope){
    parameter = '';
    this.test1 = function(){
        alert('test1');
        parameter = 'One';
    };

    this.test2 = function(){
        alert('test2');
        parameter = 'Two';
    };
}]);

I've tried alot. But now it's just guessing :(

I didn't understand how Controllers and $scope works. I've saw some examples using factory and service, even the CodeSchool (awesome by the way) coudn't help me...

So, any good soul can bring some light here?

Sorry about my misspelled english

Are you looking to pass parameters via the URL?

Jia Jian Goi
– Jia Jian Goi

2015-12-31 14:26:43 +00:00
Commented Dec 31, 2015 at 14:26 — Jia Jian Goi
– Jia Jian Goi, Commented Dec 31, 2015 at 14:26

Jia Jian Goi · Accepted Answer · 2015-12-31 14:37:02Z

3

First of all, you should be using the ui-sref attribute in your <a> tags (since you're using states, although using href works too), like this:

<a ui-sref="view2"></a>

And if you want to pass parameters, you have to configure your state's url to accept parameters:

url: '/view2/:parameter'

To access parameter in your controller, you'll also need to inject $stateParams into your controller:

app.controller('AppController', function($scope, $stateParams) {

});

And you access parameter via $stateParams.parameter like this:

app.controller('AppController', function($scope, $stateParams) {
    alert($stateParams.parameter);
    $scope.parameter = $stateParams.parameter;
});

edited Dec 31, 2015 at 14:37

answered Dec 31, 2015 at 14:25

Jia Jian Goi

1,4233 gold badges21 silver badges33 bronze badges

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

3 Comments

Rafael de Castro Over a year ago

Thanks Jia Jian, I understand your explanation but when I put on my code it didn't work... I think I miss something implied on your code, but i don't know what...

Rafael de Castro Over a year ago

Jia Jian, I dig i little more and found a friend that explaned to me. My problem was my own doubt. I didn't know how to properly explain what I wanted. I showed him your code He said it was right, but wasn't what I was trying to do xD I got your code as a Snippet for future problems :D :D Thanks a lot!! By the way, I was trying to SET data through a button on a controller on the next view.... I'm learning to use factory e properly use of MVC..... Sorry for the trouble and thanks again!

Jia Jian Goi Over a year ago

No problem! Do you want to post your solution as an answer in case someone else has that question? You can also accept your own answer.

Collectives™ on Stack Overflow

AngularJs :: Share data between Views and parameters

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related