current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm trying create a CRUD page, using AngularJS, I using Angular Router UI for pages changes

How to can I access a variable in my main Controller, in controller of route?

//This is my main controller:
var app = angular.module('app', [
    'ui.router'
]);
app.controller('MyCtrl', function ($scope) {
    $scope.persons = [
        {name: 'Daisy', description: 'Developer'},
        {name: 'Zelda', description: 'Developer'},
        {name: 'Luide', description: 'Developer'},
        {name: 'Mario', description: 'Developer'}
    ];
});

This is my router config app.config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/');

$stateProvider
    .state('list', {
        url: '/list',
        templateUrl: 'list.html',
        controller: 'MyCtrl'
    })
    .state('edit', {
        url: '/edit',
        templateUrl: 'edit.html',
        controller: function($scope, $state) {
            $scope.person = {name: "", description: ""};

            $scope.click = function () {
                $state.go('list');
            };
        }
    })
    .state('add', {
        url: '/add',
        templateUrl: 'edit.html',
        controller: function($scope, $state) {
            $scope.person = {name: "", description: ""};

            $scope.click = function () {
                // HOW TO CAN I ACCESS $SCOPE.PERSONS FOR MAKE THIS PUSH?
                $scope.persons.push($scope.person);
                $state.go('list');
            };
        }
    });

});

share|improve this question
1  
if you make edit and add child routes of list, then you can just make persons a resolve. All child routes can then inject it. –  Mathew Foscarini Dec 26 '14 at 20:53

1 Answer 1

up vote 2 down vote accepted

Rather than create $scope.persons in a MainController, it would probably be better to use a service to store the persons object:

app.service("People", function () {
   this.persons = [
        {name: 'Daisy', description: 'Developer'},
        {name: 'Zelda', description: 'Developer'},
        {name: 'Luide', description: 'Developer'},
        {name: 'Mario', description: 'Developer'}
    ];
});

Then you can inject this into your controllers (your code above):

.state('add', {
        url: '/add',
        templateUrl: 'edit.html',
        controller: function($scope, $state, People) {
            $scope.person = {name: "", description: ""};

            $scope.click = function () {
                //use persons object of people service.
                People.persons.push($scope.person);
                $state.go('list');
            };
        }
    });

});

You can share these persons across different controllers, services, and directives through Dependency Injection. For instance, your list controller (MyCtrl) would look as follows:

app.controller('MyCtrl', function ($scope, People) {
    $scope.persons = People.persons;
});
share|improve this answer
    
Thank you very much! this is working! –  Lai32290 Dec 26 '14 at 21:17

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.