Adding a code based feature flag to the demo

README.md

@@ -98,6 +98,16 @@ If you need to *hide* elements when a flag is enabled, add the `feature-flag-hid
 </div>
 ```
 
+### Toggling CodeBlocks
+
+The featureFlags.isOn method allows simple toggling of elements based on feature flags, e.g:
+
+```javascript
+  if(featureFlags.isOn('code')) {
+    alert("Hello!");
+  }
+```
+
 ### Running the demo
 
 Running the demo is easy assuming you have Gulp installed:

demo/data/flags.json

@@ -22,5 +22,11 @@
     "active": false,
     "name": "Settings",
     "description": "Configure the user's settings and preferences for the app."
+  },
+  {
+    "key": "code",
+    "active": true,
+    "name": "Code",
+    "description": "Code based flag"
   }
 ]

demo/index.html

@@ -19,6 +19,7 @@ <h1>My App</h1>
     <div messaging feature-flag="messages"></div>
     <div user-profile feature-flag="userProfile"></div>
     <div settings feature-flag="settings"></div>
+    <code></code>
   </div>
   <div class="flagContainer" feature-flag-overrides></div>
 </body>

demo/scripts/directives.js

@@ -31,6 +31,23 @@ angular.module('my-app')
       replace: true
     };
   })
+  .directive('code', function(featureFlags) {
+    return {
+      restrict: 'E',
+      scope: {},
+      template: '<div class="panel"><button ng-click="codeCtrl.alert()">Click Me!</button></div>',
+      replace: true,
+      controllerAs: 'codeCtrl',
+      controller: function() {
+        var self = this;
+        self.alert = function() {
+          if (featureFlags.isOn('code')) {
+            console.log('Hello!');
+          }
+        };
+      }
+    };
+  })
   .run(function(featureFlags, $http) {
     featureFlags.set($http.get('../data/flags.json'));
   });