Create blog directive

Victor Costa
1 parent 9ed8efe9
Showing 5 changed files with 25 additions and 9 deletions Show diff stats
src/app/components/noosfero-articles/article/article.directive.js
src/app/components/noosfero-articles/blog/blog.directive.js
src/app/components/noosfero-articles/blog/blog.html
src/app/content-viewer/content-viewer.controller.js
src/app/content-viewer/page.html
@@ -6,23 +6,30 @@
     .directive('noosferoArticle', noosferoArticle);
  
   /** @ngInject */
-  function noosferoArticle() {
+  function noosferoArticle($injector, $compile) {
     var directive = {
       restrict: 'E',
       templateUrl: 'app/components/noosfero-articles/article/article.html',
       scope: {
           article: '=',
-          owner: '='
+          profile: '='
       },
       controller: ArticleController,
       controllerAs: 'vm',
-      bindToController: true
+      bindToController: true,
+      link: function(scope, element) {
+        var specificDirective = 'noosfero'+scope.vm.article.type;
+        if($injector.has(specificDirective+'Directive')) {
+          var directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+          element.replaceWith($compile('<'+directiveName+' article="vm.article" profile="vm.profile"></'+directiveName+'>')(scope));          
+        }
+      }
     };
  
     return directive;
  
     /** @ngInject */
-    function ArticleController() {
+    function ArticleController($injector, $compile, $scope) {
       var vm = this;
     }
   }
@@ -12,7 +12,7 @@
       templateUrl: 'app/components/noosfero-articles/blog/blog.html',
       scope: {
           article: '=',
-          owner: '='
+          profile: '='
       },
       controller: BlogController,
       controllerAs: 'vm',
-{{vm.article.title}}
+<div class="page-header">
+  <h3 ng-bind="vm.article.title"></h3>
+</div>
  
-<pre>{{vm.article}}</pre>
+<div>
+  <div ng-repeat="child in vm.article.children">
+    <a ng-href="/{{vm.profile.identifier}}/{{child.path}}"><h4 ng-bind="child.title"></h4></a>
+    <div ng-bind-html="child.body | limitTo: 500"></div>
+  </div>
+</div>
@@ -10,10 +10,12 @@
   function ContentViewerController(noosfero, $log, $stateParams, $scope) {
     var vm = this;
     vm.article = null;
+    vm.profile = null;
     activate();
  
     function activate() {
-      noosfero.communities.one($scope.vm.owner.id).one('articles').get({path: $stateParams.page}).then(function(articles) {
+      vm.profile = $scope.vm.owner;
+      noosfero.communities.one(vm.profile.id).one('articles').get({path: $stateParams.page}).then(function(articles) {
         vm.article = articles.article;
       });
     }
-<noosfero-article article="vm.article"></noosfero-article>
+<noosfero-article ng-if="vm.article" article="vm.article" profile="vm.profile"></noosfero-article>
...	...	@@ -6,23 +6,30 @@
6	6	.directive('noosferoArticle', noosferoArticle);
7	7
8	8	/** @ngInject */
9		- function noosferoArticle() {
	9	+ function noosferoArticle($injector, $compile) {
10	10	var directive = {
11	11	restrict: 'E',
12	12	templateUrl: 'app/components/noosfero-articles/article/article.html',
13	13	scope: {
14	14	article: '=',
15		- owner: '='
	15	+ profile: '='
16	16	},
17	17	controller: ArticleController,
18	18	controllerAs: 'vm',
19		- bindToController: true
	19	+ bindToController: true,
	20	+ link: function(scope, element) {
	21	+ var specificDirective = 'noosfero'+scope.vm.article.type;
	22	+ if($injector.has(specificDirective+'Directive')) {
	23	+ var directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
	24	+ element.replaceWith($compile('<'+directiveName+' article="vm.article" profile="vm.profile"></'+directiveName+'>')(scope));
	25	+ }
	26	+ }
20	27	};
21	28
22	29	return directive;
23	30
24	31	/** @ngInject */
25		- function ArticleController() {
	32	+ function ArticleController($injector, $compile, $scope) {
26	33	var vm = this;
27	34	}
28	35	}
...	...
...	...	@@ -12,7 +12,7 @@
12	12	templateUrl: 'app/components/noosfero-articles/blog/blog.html',
13	13	scope: {
14	14	article: '=',
15		- owner: '='
	15	+ profile: '='
16	16	},
17	17	controller: BlogController,
18	18	controllerAs: 'vm',
...	...
1		-{{vm.article.title}}
	1	+<div class="page-header">
	2	+ <h3 ng-bind="vm.article.title"></h3>
	3	+</div>
2	4
3		-<pre>{{vm.article}}</pre>
	5	+<div>
	6	+ <div ng-repeat="child in vm.article.children">
	7	+ <a ng-href="/{{vm.profile.identifier}}/{{child.path}}"><h4 ng-bind="child.title"></h4></a>
	8	+ <div ng-bind-html="child.body \| limitTo: 500"></div>
	9	+ </div>
	10	+</div>
...	...
...	...	@@ -10,10 +10,12 @@
10	10	function ContentViewerController(noosfero, $log, $stateParams, $scope) {
11	11	var vm = this;
12	12	vm.article = null;
	13	+ vm.profile = null;
13	14	activate();
14	15
15	16	function activate() {
16		- noosfero.communities.one($scope.vm.owner.id).one('articles').get({path: $stateParams.page}).then(function(articles) {
	17	+ vm.profile = $scope.vm.owner;
	18	+ noosfero.communities.one(vm.profile.id).one('articles').get({path: $stateParams.page}).then(function(articles) {
17	19	vm.article = articles.article;
18	20	});
19	21	}
...	...
1		-<noosfero-article article="vm.article"></noosfero-article>
	1	+<noosfero-article ng-if="vm.article" article="vm.article" profile="vm.profile"></noosfero-article>
...	...