Привязка к внешней модели в представлении

Question

Итак, я создаю приложение с использованием среды Mean.js, я уже создал два модуля, модуль клиента и модуль встреч. Назначение будет иметь идентификатор клиента.

Mean.js создает файлы клиента и сервера в модулях, Angular используется на стороне клиента.

У меня пока нет опыта работы с Angular, поэтому я испытываю некоторые затруднения, пытаясь выяснить, каков будет подход для выполнения следующих действий.

В "create-assignments-view.html" (модуль встреч) я хочу иметь возможность привязать окно поиска к контроллеру клиентов, чтобы я мог найти имя клиента и выбрать его.

Модуль клиентов работает, как и ожидалось, я могу создавать, перечислять, редактировать и обновлять новых клиентов, но, конечно, ему не нужна дополнительная информация из другого модуля. В отличие от модуля встреч, где я хочу иметь возможность просмотреть список клиентов и выбрать одного из них.

Каждый модуль имеет свой собственный контроллер, который управляет операциями CRUD, маршрутами и представлениями.

Я хотел бы получить помощь, документацию, ссылки и т. Д., Которые помогут мне получить ответ и понять основы того, как это можно сделать.

Спасибо!

Answer 1

Вероятно, нужно использовать сервис Angular, точнее фабрику. Это так называемые синглтоны, которые не меняются, как контроллеры.

Вот пример облегченного плунжера: 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;
    }