Last active
December 16, 2015 11:58
-
-
Save gjohnson/5430681 to your computer and use it in GitHub Desktop.
splitting up angular controllers
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(){ | |
| var ScopeShare = angular.module('ScopeShare', []); | |
| ScopeShare | |
| .controller('FormController', function($scope){ | |
| $scope.user = {}; | |
| $scope.submit = function(){ | |
| console.log(JSON.stringify($scope.user)); | |
| }; | |
| }); | |
| ScopeShare | |
| .controller('DetailsController', function($scope){ | |
| var user = $scope.user || {}; | |
| user.name = { | |
| first: 'first name', | |
| last: 'last name' | |
| }; | |
| }); | |
| ScopeShare | |
| .controller('ContactController', function($scope){ | |
| var user = $scope.user || {}; | |
| user.contact = { | |
| email: 'email@web.com', | |
| phone: '704-123-4567' | |
| }; | |
| }); | |
| })(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html ng-app="ScopeShare"> | |
| <head> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> | |
| <script src="app.js"></script> | |
| </head> | |
| <body> | |
| <form ng-controller="FormController" ng-submit="submit()"> | |
| <fieldset ng-controller="DetailsController"> | |
| <legend>Details</legend> | |
| <label for="firstName">first name</label> | |
| <input ng-model="user.name.first" name="firstName" /> | |
| <label for="lastName">last name</label> | |
| <input ng-model="user.name.last" name="lastName" /> | |
| </fieldset> | |
| <fieldset ng-controller="ContactController"> | |
| <legend>Contact</legend> | |
| <label for="email">email</label> | |
| <input ng-model="user.contact.email" name="email"/> | |
| <label for="phone">phone</label> | |
| <input ng-model="user.contact.phone" name="phone"/> | |
| </fieldset> | |
| <input type="submit" value="submit" /> | |
| </form> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment