feature: innerHtml templates will get rendered now

JohnnyTheTank · Jan 24, 2016 · 6758ed5 · 6758ed5
1 parent 6e6ee62
commit 6758ed5
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 29 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "apiNG",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "homepage": "https://github.com/JohnnyTheTank/apiNG",
   "authors": [
     "Jonathan Hornung <[email protected]>"

diff --git a/demo/index.html b/demo/index.html
@@ -20,32 +20,31 @@
     <style>
         body {
             font-family: 'Source Sans Pro', sans-serif;
-            background:#0d3349;
-            color:white;
-            padding:10px;
+            background: #0d3349;
+            color: white;
+            padding: 10px;
         }
 
         a:link,
         a:active,
         a:visited {
-            color:yellow;
+            color: yellow;
         }
     </style>
 
 </head>
 <body ng-app="app">
 
 <h1>Unstyled, one result</h1>
-<aping
-    template-url="unstyled_template.html"
-    aping-jsonloader="[{ 'path': 'https://randomuser.me/api/' }]">
+<aping aping-jsonloader="[{ 'path': 'https://randomuser.me/api/' }]">
+    <pre>{{results | json}}</pre>
 </aping>
 
 <hr>
 <h1>Styled, but two results</h1>
 <aping
-    template-url="template.html"
-    aping-jsonloader="[{ 'path': 'https://randomuser.me/api/' }, { 'path': 'https://randomuser.me/api/' }]">
+        template-url="template.html"
+        aping-jsonloader="[{ 'path': 'https://randomuser.me/api/' }, { 'path': 'https://randomuser.me/api/' }]">
 </aping>
 
 <br><br>

diff --git a/demo/unstyled_template.html b/demo/unstyled_template.html
diff --git a/dist/aping.js b/dist/aping.js
@@ -1,6 +1,6 @@
 /**
     @name: aping 
-    @version: 1.0.4 (23-01-2016) 
+    @version: 1.0.5 (24-01-2016) 
     @author: Jonathan Hornung <[email protected]> 
     @url: https://github.com/JohnnyTheTank/apiNG 
     @license: MIT
@@ -36,11 +36,28 @@ angular.module('jtt_aping')
                 valueName: '@'
             },
             link: function (scope, element, attrs) {
-                $templateRequest(scope.templateUrl || apingDefaultSettings.templateUrl).then(function (html) {
-                    var template = angular.element(html);
-                    element.append(template);
-                    $compile(template)(scope);
-                });
+
+                var templatePath = scope.templateUrl || undefined;
+                if (angular.isUndefined(templatePath)) {
+                    if (angular.isDefined(apingDefaultSettings.templateUrl)) {
+                        templatePath = apingDefaultSettings.templateUrl;
+                    }
+                }
+
+                if (angular.isDefined(templatePath) && templatePath !== "$NONE") {
+                    $templateRequest(templatePath).then(function (html) {
+                        var template = angular.element(html);
+                        element.append(template);
+                        $compile(template)(scope);
+                    });
+                } else {
+                    var html = element.html();
+                    html = html.replace(/\[\[(\w+)\]\]/g, function (_, text) {
+                        return '<span translate="' + text + '"></span>';
+                    });
+                    element.html(html);
+                    $compile(element.contents())(scope);
+                }
             },
             controller: ['$scope', function ($scope) {
                 $scope.results = [];
@@ -170,7 +187,7 @@ angular.module('jtt_aping')
                         $scope.results = $scope.results.splice(0, appSettings.maxItems);
                     }
 
-                    if(angular.isDefined(appSettings.valueName)) {
+                    if (angular.isDefined(appSettings.valueName)) {
                         apingResults[appSettings.valueName] = $scope.results;
                     }
 

diff --git a/dist/aping.min.js b/dist/aping.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aping",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "apiNG is an AngularJS directive that enables you to receive, aggregate, limit, order and display data from one or more sources. The complete setup is dead simple, just by adding data-attributes to your html",
   "main": "dist/aping.min.js",
   "scripts": {

diff --git a/src/aping-directive.js b/src/aping-directive.js
@@ -26,11 +26,28 @@ angular.module('jtt_aping')
                 valueName: '@'
             },
             link: function (scope, element, attrs) {
-                $templateRequest(scope.templateUrl || apingDefaultSettings.templateUrl).then(function (html) {
-                    var template = angular.element(html);
-                    element.append(template);
-                    $compile(template)(scope);
-                });
+
+                var templatePath = scope.templateUrl || undefined;
+                if (angular.isUndefined(templatePath)) {
+                    if (angular.isDefined(apingDefaultSettings.templateUrl)) {
+                        templatePath = apingDefaultSettings.templateUrl;
+                    }
+                }
+
+                if (angular.isDefined(templatePath) && templatePath !== "$NONE") {
+                    $templateRequest(templatePath).then(function (html) {
+                        var template = angular.element(html);
+                        element.append(template);
+                        $compile(template)(scope);
+                    });
+                } else {
+                    var html = element.html();
+                    html = html.replace(/\[\[(\w+)\]\]/g, function (_, text) {
+                        return '<span translate="' + text + '"></span>';
+                    });
+                    element.html(html);
+                    $compile(element.contents())(scope);
+                }
             },
             controller: ['$scope', function ($scope) {
                 $scope.results = [];
@@ -160,7 +177,7 @@ angular.module('jtt_aping')
                         $scope.results = $scope.results.splice(0, appSettings.maxItems);
                     }
 
-                    if(angular.isDefined(appSettings.valueName)) {
+                    if (angular.isDefined(appSettings.valueName)) {
                         apingResults[appSettings.valueName] = $scope.results;
                     }