CODEWITHSUNDEEP
angularjsmongodbmeanjs
José Del Valle
José Del Valle

Reputation: 691

Bind to external model in the view

So I'm creating an app using the Mean.js framework, I already created two modules, a customer module and an appointments module. An appointment would have a customer id.

Mean.js creates the client and server files within the modules, Angular used in the client side.

I'm not that experienced with Angular yet so I'm having some struggle trying to find out what would be the approach to do the following.

In the "create-appointments-view.html" (appointment module), I want to be able to bind a search box to the customers controller so I can search for a customer's name and select it.

The customers module works as expected, I can create, list, edit and update new customers, but of course it doesn't need any additional info from another module. Contrary to the appointments module where I want to be able to look at the list of customers and select one of them.

Each module has its own controller that manages the CRUD ops, the routes, and the views.

I would like to get some help, documentation, links, etc that help me get to the answer and understand the basics of how this can be done.

Thanks!

Upvotes: 0

Views: 66

Answers (1)

Rob
Rob

Reputation: 1860

Probably need to use an Angular service, more specifically a factory. They are singletons so once called, that don't change like controllers do.

Here's a lite plunker example: http://plnkr.co/edit/DoxvzZZf4OIxaOJ24EED

angular
        .module('app',['ngRoute'])
        .config(config)
        .factory('Service',Service)
        .controller('FirstCtrl',FirstCtrl)
        .controller('SecondCtrl',SecondCtrl);


    function config($routeProvider) {
        $routeProvider
          .when('/', {
            templateUrl: 'one.html',
            controller: 'FirstCtrl as first_ctrl'
          })
          .when('/two', {
            templateUrl: 'two.html',
            controller: 'SecondCtrl as second_ctrl'
          })
          .otherwise({
            redirectTo: '/'
          });
    }


    function Service() {
        var service = {
            name: 'Clark'
        }

        return service;
    }

    function FirstCtrl(Service) {
        var vm = this;

        vm.name = Service.name;
        vm.setName = setName;

        function setName() {
            console.log('new name set');
            Service.name = vm.name;
        }
    }

    function SecondCtrl(Service) {
        var vm = this;
        vm.name = Service.name;
    }

Upvotes: 1

Related Questions