Last active
August 29, 2015 14:05
-
-
Save wulymammoth/3f41b5adf990e3f7c267 to your computer and use it in GitHub Desktop.
How to utilize Isolate Scope Bindings in AngularJS
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
| <!DOCTYPE html> | |
| <html ng-app="myApp"> | |
| <head> | |
| <meta name="AngularJS Isolate Scope Bindings" content="Binding to Isolate Scope" /> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script> | |
| <meta charset="utf-8"> | |
| <title>AngularJS Isolate Scope Bindings</title> | |
| </head> | |
| <body ng-controller="MainCtrl as main"> | |
| <first dial="main.callHome( message )"></first><br /><hr /> | |
| <second weather="rain"></second><br /><hr /> | |
| Testy: <input type="text" ng-model="main.testy"><br /> | |
| <third woohoo="main.testy"></third><br /><hr /> | |
| <select> | |
| <option>Please select one</option> | |
| <option ng-repeat="item in main.items">{{ item }}</option> | |
| </select> | |
| <script> | |
| angular.module('myApp', []) | |
| .controller('MainCtrl', ['$scope', function() { | |
| this.callHome = function(message) { | |
| alert(message); | |
| }; | |
| this.testy = "David was here"; | |
| this.items = [ | |
| 'Athletes', | |
| 'Fashinistas', | |
| 'Luminaries' | |
| ]; | |
| }]) | |
| .directive('first', function() { | |
| return { | |
| restrict: 'EA', | |
| scope: { | |
| // invoked in context of the controller | |
| dial: '&' | |
| }, | |
| template: [ | |
| '<input type="text" ng-model="value" />', | |
| '<div style="border: 1px solid black" ng-click="dial({ message: value})">', | |
| 'Call home!', | |
| '</div>' | |
| ].join(''); | |
| }; | |
| }) | |
| .directive('second', function() { | |
| return { | |
| restrict: 'EA', | |
| scope: { | |
| // stores the string passed in | |
| weather: '@' | |
| }, | |
| template: '<span style="font-weight: bold; font-size: 27px">{{ weather }}</span>' | |
| }; | |
| }) | |
| .directive('third', function() { | |
| return { | |
| restrict: 'EA', | |
| scope: { | |
| // two-way bound | |
| woohoo: '=' | |
| }, | |
| template: '<span style="font-weight: bold; font-size: 27px">{{ woohoo }}</span>' | |
| }; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment