How to "bind" the HTML representation to a controller

Question

I'm reading through some docs and books about Angular, but I don't really find an angular way of the following problem:

If I have a controller (let's say CardController), and another controller which handles the creation of multiple instances of the CardController. How should I implement the HTML-stuff? I want to be able to instantiate a Card, which has a specific HTML-code (like the one below) and is connected to the CardController.

I don't think that I should pollute the CardController to setup the HTML stuff with ugly .append-stuff. Or is this the way? Should I write an extra service for the HTML representation like CardView or create an extra directive?

If you look at this example, I want to be able to click on "Add another card" and see another instance of a card added below (so basically the ability to have multiple items):

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

<head>
  <script data-require="[email protected]" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
</head>

<body>

  <div ng-controller="MainController">
    <button ng-click="add()">Add another card</button>
  </div>

  <div id="content">
    <div ng-controller="CardController">
      <h1>{{ title }}</h1>
      <p>{{ message }}</p>
    </div>
  </div>

  <script>
    (function() {
      var app = angular.module("theApp", []);

      app.controller('MainController', function($scope) {
        $scope.add = function() {
          // Setup HTML for TheController:
          // add another DIV/H1/P-etc. to #content,
          // just like the one at the beginning.
          console.log("Add another card");
        };
      });

      app.controller('CardController', function($scope) {
        $scope.title = "A Title";
        $scope.message = "Some message";
      });

    }());
  </script>

</body>

</html>

Did you check directives? You can specify a <card> tag with the properties that you want. — Marco Aurélio Deleu
– Marco Aurélio Deleu, Commented Oct 13, 2015 at 12:49

Niezborala · Accepted Answer · 2015-10-13 12:51:50Z

2

Try this code from my snippet:

(function() {
  var app = angular.module("theApp", []);

  app.controller('MainController', function($scope) {
    var iter = 1;
    $scope.cards = [{
      id: 1
    }];

    $scope.add = function() {
      $scope.cards.push({
        id: ++iter
      });

      // Setup HTML for TheController:
      // add another DIV/H1/P-etc. to #content,
      // just like the one at the beginning.
      console.log("Add another card");
    };
  });

  app.controller('CardController', function($scope) {
    $scope.title = "A Title";
    $scope.message = "Some message";
  });
}());

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

<head>
  <script data-require="[email protected]" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
</head>

<body ng-controller="MainController">

  <div>
    <button ng-click="add()">Add another card</button>
  </div>

  <div id="content">
    <div ng-repeat="card in cards" ng-controller="CardController">
      <h1>{{ title }}</h1>
      <p>{{ message }}</p>
    </div>
  </div>

</body>

</html>

answered Oct 13, 2015 at 12:51

Niezborala

1,8571 gold badge19 silver badges27 bronze badges

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

2 Comments

tamasgal Over a year ago

Wow, that's clever! I did not thought about using ng-repeat and a list (which can be empty without complaining).

tamasgal Over a year ago

Is there a way to access the $scope of the cards within the MainController?

Dawid Pawłowski · Accepted Answer · 2015-10-13 13:09:45Z

There is few options. For example you can use angular directives (for me this is the most elegant solution) and create HTML structure like this:

<div ng-controller="MainController">
    <button ng-click="add()">Add another card</button>

    <div id="content">
        <your-card-directive ng-repeat="card in cards" card-data="card"></your-card-directive>
    </div>
</div>

or use ng-include to load HTML from your HTML files:

<div ng-controller="MainController">
    <button ng-click="add()">Add another card</button>

    <div ng-repeat="card in cards" ng-controller="CardController as CardCtrl" ng-include="'../../your-card-template.html'"></div>
</div>

or just use inline HTML:

<div ng-controller="MainController">
    <button ng-click="add()">Add another card</button>

    <div ng-repeat="card in cards" ng-controller="CardController">
        <h1>{{ title }}</h1>
        <p>{{ message }}</p>
    </div>
</div>

Aishwat Singh · Accepted Answer · 2015-10-13 12:54:00Z

0

one approach

<div ng-repeat="test in tests>{{test}}</div>

$scope.tests = ["Test Message","Test Message 2"];
$scope.tests.push("new msg");

this vl automatically create a div and ur list grows

or

http://blog.sodhanalibrary.com/2014/08/append-or-prepend-html-to-div-using.html#.Vhz-NxOqqko

answered Oct 13, 2015 at 12:54

Aishwat Singh

4,5093 gold badges30 silver badges50 bronze badges

1 Comment

Niezborala Over a year ago

This does not work, because MainController don't wrapp a div with id content

Collectives™ on Stack Overflow

How to "bind" the HTML representation to a controller

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related