diff --git a/README.md b/README.md index 4273da2..4e21517 100644 --- a/README.md +++ b/README.md @@ -98,6 +98,16 @@ If you need to *hide* elements when a flag is enabled, add the `feature-flag-hid ``` +### 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: diff --git a/demo/data/flags.json b/demo/data/flags.json index 5af3935..cbaf14c 100644 --- a/demo/data/flags.json +++ b/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" } ] diff --git a/demo/index.html b/demo/index.html index 41ba1d8..f5a278b 100644 --- a/demo/index.html +++ b/demo/index.html @@ -19,6 +19,7 @@

My App

+
diff --git a/demo/scripts/directives.js b/demo/scripts/directives.js index c7fe4cf..06a5cd9 100644 --- a/demo/scripts/directives.js +++ b/demo/scripts/directives.js @@ -31,6 +31,23 @@ angular.module('my-app') replace: true }; }) + .directive('code', function(featureFlags) { + return { + restrict: 'E', + scope: {}, + template: '
', + 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')); });