AngularJS - sharing information between controllers, or altering architecture to not have to -


this question has answer here:

i learning angular, , attempting writing app.

i page appear (untested html, figuring out architecture 1st):

course.html:

<div ng-controller='coursecontroller course' >     {{course.name}}     <form>         <input type='text' ng-model='course.desscription' />     </form>     teachers:     <div ng-include="'people.html'" ng-model="course.teachers people"></div>      students:     <div ng-include="'people.html'" ng-model="course.students people"></div> </div> 

people.html:

<button type="button" ng-click="addparticipant()">add new {{people.persontype}}</button> <table>     <tbody>         <tr ng-repeat="person in people track person.id">             <td>{{person.firstname + ' ' + person.lastname}}</td>             <td><button type="button" ng-click="editparticipant()">edit</button></td>             ... </table> <script type="text/ng-template" id="personmodal.html">     <div class="modal-title">{{operationdescription}}</div>     <div class="modal-body">        <div ng-view="'person.html'">     </div>             </script> 

addparticipant() & editparticipant() display in modal. persontype 1 of either 'teacher' or 'student'.operationdescription being 1 of add/edit teacher/student

person.html:

<form ng-controller='personcontroller person'>     <fieldset><legend></legend>         firstname:         <input ng-model="person.firstname" />         <button class="btn btn-primary" type="button" ng-click="ok()">ok</button> 

[please feel free comment on problems architecture or html above].

how achieve information exchange between controllers (note done through modal, not routing).

the personcontroller need have access persons id (if numeric, record personfactory method, otherwise create new record). after creating person, appropriate array (representing teachers or students) needs have item added new person's name , id, , close modal. how achieve this?

the teaching examples can find web either have single controller or use routing. single controller solution seems wrong because lacks separation of concerns , re-usability (one envisage wanting create new person other pages within app, , potentially display form outside modal).

if have inappropriate architecture, other approaches?

edit

in response george stocker - question learner , amateur architecture , usage patterns. given usage case above - factory method way achieve this? have, in learning far, restricted factory methods concerns regarding interacting data store - doesn't leaving pattern confuse architecture? in wpf mvvm, closest have come before angular, parent viewmodel have have instantiated child viewmodel, injected context , set appropriate variables, , observed appropriate properties on new viewmodel object without passing data via service layer - quite neat, not fit in angular architecture learning/aware of (the equivalent of answer have linked have been considered bad practice in wpf). had looked around @ passing data between angular controllers, had come across thoughts should avoided. having looked @ answers , comments, becoming convinced passing data between controllers using either factory or service method indeed angular way.

thank you

create service share data

take @ services in angular share data. services "global namespaces" inside of angular. can store/pull data, , can injected multiple controllers share data. here's quick example of service in angular.

if it's small, can use rootscope instead

and, small thing (like username), store property on $rootscope. of scopes in various controllers inherit rootscope. if inject controller, can access it.

var myapp = angular.module('myapp');  myapp.controller('first', ['$scope', '$rootscope', function($scope, $rootscope) {     $rootscope.username = 'name'; }]); 

modal issues

depending on using create modal divs, you'll create modal dialogs within parent controller.

if you're using framework angular-ui,

(a) pass person object modal form's controller resolve parameter and

(b) pass base controller in .then() function reintegration dataset.

the whole open/ close modal dialog articulated in this post.


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -