-1

I'm working on a social app about image posts, and we have to show these posts in multiple screens in the app. The problem is, we are repeating the posts' structure in every screen template, so if we make a change to the structure of the post in some template we have to change that in every template.

My question is, it is possible to create a template -in this case the posts' structure- and send the post object as a parameter so this new template can load it correctly? And of course, call this template everywhere we need it, something like Django blocks and template inheritance. Is there a way to do that in Angular? Thank you.

Julián Bonilla
  • 385
  • 1
  • 4
  • 18

1 Answers1

0

if I understand your question, I think that you need to use directive

Script

angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.customer = {
    name: 'Naomi',
    address: '1600 Amphitheatre'
  };
}])
.directive('myCustomer', function() {
  return {
    templateUrl: 'my-customer.html'
  };
});

Index.html

<div ng-controller="Controller">
  <div my-customer></div>
</div>

template

Name: Naomi Address: 1600 Amphitheatre

The link with the documentation is here

UPDATE 1

based on your question, you can pass and object to the directive for that you need do something like the following code.

myApp.directive('passObject', function() {
    return {
        restrict: 'E',
        scope: { obj: '=' },
        template: '<div>Hello, {{obj.prop}}!</div>'
    };
});

myApp.controller('MyCtrl', function ($scope) {
    $scope.obj = { prop: "world" };
});
Dlanor
  • 266
  • 2
  • 13
  • I need to pass the directive an object with a lot of properties, can I assign that object to the directive scope or something like that? – Julián Bonilla Jun 03 '16 at 18:38