single element documentation

Null McNull · Null McNull · commit 124ef67bae7f · 2014-08-22T19:11:22.000+02:00
diff --git a/README.md b/README.md
@@ -77,65 +77,39 @@ The callback function to queue.
 Blocking individual elements
 ============================
 
-Instead of blocking the whole page, it's also possible to block individual elements. Just like the main `blockUI` service, this can be done either manually or automatically. Elements can be made _block ui enabled_ by adding a sibling `block-ui` directive element.
+Instead of blocking the whole page, it's also possible to block individual elements. Just like the main `blockUI` service, this can be done either manually or automatically. Elements can be made _block ui enabled_ by wrapping them in a `block-ui` element.
 
+#### Manual blocking
 ```
-<div>
+<div block-ui="myBlockUI">
   <p> ... I'm blockable ... </p>
-  <div block-ui="myBlockUI"></div>
 </div>
 ```
 
-#### Automatic blocking
-
-Automatic blocking elements can be done by providing the `block-ui` directive a `block-ui-pattern` attribute. This attribute should contain a valid regular expression, which indicates the requests that are associated with the specific element.
+The `block-ui` directive takes an optional value, which can be used to get an instance of the associated `blockUI` service.
 
 ```
-<div>
-  <p> ... I'm blockable ... </p>
-  <!-- Initiated the block whenever a request to '/api/quote' is performed -->
-  <div block-ui block-ui-pattern="/^\/api\/quote($|\/).*/"></div>
-</div>
+// Get the reference to the block service.
+var myBlockUI = blockUI.instances.get('myBlockUI');
+
+// Start blocking the element.
+myBlockUI.start();
+
+$timeout(function() {
+  // Stop the block after some async operation.
+  myBlockUI.stop();
+}, 1000);
 ```
+#### Automatic blocking
 
-#### Manual blocking
+Automatic blocking elements can be done by providing the `block-ui` directive a `block-ui-pattern` attribute. This attribute should contain a valid regular expression, which indicates the requests that are associated with the specific element.
 
-By providing the `block-ui` directive a name the controller can request the instance via the injected `blockUI` service. All functions exposed by the main `blockUI` service are available on the individual instances.
- 
 ```
-<div>
+<!-- Initiated the UI block whenever a request to '/api/quote' is performed -->
+<div block-ui block-ui-pattern="/^\/api\/quote($|\/).*/"></div>
   <p> ... I'm blockable ... </p>
-  <div block-ui="myBlockUI"></div>
 </div>
 ```
-```
-angular.module('myApp').controller('MyController', function($scope, $http, blockUI) {
-
-  // Grab the reference to the instance defined in the html markup
-  var myBlockUI = blockUI.instances.get('myBlockUI');
-  
-  $scope.doSomethingAsync = function() {
-  	
-    myBlockUI.start();
-    	
-    $timeout(function() {
-	  myBlockUI.stop(); 
-	}, 1000);  
-	
-  };
-});
-```
-
-
-BlockUI overlay template
-========================
-
-The html and styling of the builtin template is kept bare bone. It consist of two divs (overlay and message):
-
-    <div ng-show="blockCount > 0" class="block-ui-overlay" ng-class="{ 'block-ui-visible': blocking }"></div>
-    <div ng-show="blocking" class="block-ui-message">{{ message }}</div>
-
-A custom template can be specified in the module configuration.
 
 BlockUI module configuration
 ============================
@@ -206,13 +180,12 @@ Allows you to specify a filter function to exclude certain ajax requests from bl
     });
     
 #### autoInjectBodyBlock
-When the module is started it will inject the _main block element_ as a child of the _body element_. 
+When the module is started it will inject the _main block element_ by adding the `block-ui` directive to the `body` element.
 
-    <body>
-      <div block-ui="main"></div>
+    <body block-ui="main">
     </body>
     
-This behaviour can be disabled if there no need for any _fullscreen_ blocking or if more control over this element is required.
+This behaviour can be disabled if there no need for any _fullscreen_ blocking or if there's more control required.
 
     blockUIConfigProvider.autoInjectBodyBlock(false); // Disable auto body block
     
diff --git a/src/app/examples/element-blocking.html b/src/app/examples/element-blocking.html
@@ -12,23 +12,21 @@ <h2 class="spacer-lg">Automatic Element Blocking</h2>
   </p>
 
   <div class="example">
-      <!--
-        Mark this region as blockable for any request that
-        matches the provided pattern: app/examples/data-array.json
-      -->
-      <!--<div block-ui block-ui-pattern="/^app\/examples\/data-array\.json$/"></div>-->
+    <!--
+      Mark this region as blockable for any request that
+      matches the provided pattern: app/examples/data-array.json
+    -->
     <div block-ui block-ui-pattern="/^app\/examples\/data-array\.json$/">
       <div my-demo-table limit="5"></div>
     </div>
 
     <h3>Html</h3>
-    <pre><code>&lt;div&gt;
-  &lt;!--
-    Mark this region as blockable for any request that
-    starts with &quot;/api/person&quot;
-  --&gt;
-  &lt;div block-ui block-ui-pattern=&quot;/^\/api\/person($|\/).*/&quot;&gt;&lt;/div&gt;
-  &lt;div my-demo-table&gt;&lt;/div&gt;
+    <pre><code>&lt;!--
+  Mark this region as blockable for any request that
+  matches the provided pattern: app/examples/data-array.json
+--&gt;
+&lt;div block-ui block-ui-pattern=&quot;/^app\/examples\/data-array\.json$/&quot;&gt;
+  &lt;div my-demo-table limit=&quot;5&quot;&gt;&lt;/div&gt;
 &lt;/div&gt;</code></pre>
   </div>
 
@@ -55,8 +53,7 @@ <h2 class="spacer-lg">Manual Element Blocking</h2>
     </div>
 
     <h3>Html</h3>
-      <pre><code>&lt;div&gt;
-  &lt;div block-ui=&quot;myBlock&quot;&gt;&lt;/div&gt;
+      <pre><code>&lt;div block-ui=&quot;myBlock&quot;&gt;
   &lt;p&gt;Lorem ipsum dolor sit amet ... &lt;/p&gt;
 &lt;/div&gt;
 &lt;button ng-click=&quot;toggleBlock()&quot;&gt;Toggle Block&lt;/button&gt;</code></pre>
