Using an AngularJS service to construct html partials

Question

I'm trying to populate an html list using AngularJs in the following way. I want to create a service that takes an html partial, populates it's attributes in the constructor and returns it. Below is my example for this.

Plunker

js:

var app = angular.module('plunker', []);

app.controller('MainCtrl',['$scope','listElemService', function($scope,listElemService) {

$scope.listElemArray = [];  

var testParam1 = {};
var tester = listElemService(testParam1); 
$scope.listElemArray.push(new listElemService(testParam1));

var testParam2 = {};
testParam2.url = "http://www.yahoo.com";
testParam2.imgSrc = "https://pbs.twimg.com/profile_images/378800000416430559/3fab1a175e2a87010f23435e0aea0f61_400x400.jpeg";

$scope.listElemArray.push(new listElemService(testParam2));

}]).factory('listElemService',function(){

    var ListElemConstructor = function(params) {
      this.initialize = function() {
      this.url = params.url;
      this.imgSrc = params.imgSrc;

      /*
      want to be able to construct list element below
      from listElemView.html based on params.url and params.imgSrc
      */
      this.html =  "Html Placeholder";
    };

    this.initialize();
};

return ListElemConstructor;

});

main html:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.0-rc.1/angular.js" data-semver="1.4.0-rc.1"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <ul>

      <li ng-repeat="x in listElemArray">
        {{x.html}}
      </li>
    </ul>
  </body>

</html>

Html Partial that I'd like to 'bring in' to my service and populate:

<li>
  <img src=""/>
  <a href=""></a>
</li>

you use factory wrong, in your code - you return constructor function, and use it like simple function, but constructor return nothing — Grundy
– Grundy, Commented May 10, 2015 at 5:29
Okay thanks, I go the Plunker working now, by using the 'new' keyword. Does this fix what you're pointing out? — Ben Pearce
– Ben Pearce, Commented May 10, 2015 at 5:41
also why you need {{x.html}} if you can simply <img src="{{x.imgSrc}}"/> <a href="x.url"></a>? — Grundy
– Grundy, Commented May 10, 2015 at 5:41
I want to construct that in the service based on the html partial to have more modular html. — Ben Pearce
– Ben Pearce, Commented May 10, 2015 at 5:42
so you can use ngInclude, you have many different partials? or simply one??? — Grundy
– Grundy, Commented May 10, 2015 at 5:43

Grundy · Accepted Answer · 2015-05-10 06:22:18Z

1

I not sure that you need x.html, seems like you need or inline template like

<li ng-repeat="x in listElemArray">
    <img src="{{x.imgSrc}}"/>
    <a href="{{x.url}}"></a>
</li>

var app = angular.module('app', []);

app.controller('MainCtrl', ['$scope', 'listElemService',
  function($scope, listElemService) {

    $scope.name = 'World';

    $scope.listElemArray = [];

    var testParam2 = {};
    testParam2.url = "http://www.yahoo.com";
    testParam2.imgSrc = "https://pbs.twimg.com/profile_images/378800000416430559/3fab1a175e2a87010f23435e0aea0f61_400x400.jpeg";

    $scope.listElemArray.push(new listElemService(testParam2));

    console.log("$scope.listElem: ", $scope.listElemArray);

  }
]).factory('listElemService', function() {

  var ListElemConstructor = function(params) {
    console.log("list elem const url: " + params.url);
    this.initialize = function() {
      this.url = params.url;
      this.imgSrc = params.imgSrc;

      var self = this;
    };

    this.initialize();

  };

  return ListElemConstructor;

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
  <ul>

    <li ng-repeat="x in listElemArray">
      <img ng-src="{{x.imgSrc}}" />
      <a ng-href="{{x.url}}">{{x.url}}</a>
    </li>
  </ul>
</div>

or use ngInclude

<li ng-repeat="x in listElemArray" ng-include="'listElemView.html'">

Sample on plunker: http://plnkr.co/edit/5W4L1NoyiaLs7M3lCLZm?p=preview

edited May 10, 2015 at 6:22

answered May 10, 2015 at 5:49

Grundy

13.4k3 gold badges39 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CuriousMind Over a year ago

It is better to use ngSrc, instead of src attribute of image.

Grundy Over a year ago

@CuriousMind yep, in snippet use ng-src and ng-href

CuriousMind · Accepted Answer · 2015-05-10 05:49:04Z

0

You can make use of ngBindHtml to insert HTML text in the list items. Hence your code may look like this

<li ng-repeat="x in listElemArray" ngBindHtml="x.html">
</li>

Check the documentation here. Also check the section which says that you should use angular-sanitize.js, to ensure security.

answered May 10, 2015 at 5:49

CuriousMind

3,1833 gold badges31 silver badges59 bronze badges

Collectives™ on Stack Overflow

Using an AngularJS service to construct html partials

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related