CODEWITHSUNDEEP
angularjs
tamasgal
tamasgal

Reputation: 26299

How to "bind" the HTML representation to a controller

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>

Upvotes: 0

Views: 51

Answers (3)

Dawid Pawłowski
Dawid Pawłowski

Reputation: 162

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>

Upvotes: 2

Aishwat Singh
Aishwat Singh

Reputation: 4459

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

Upvotes: 0

Niezborala
Niezborala

Reputation: 1857

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>

Upvotes: 2

Related Questions