CODEWITHSUNDEEP
javascriptjqueryangularjs
CaffeineShots
CaffeineShots

Reputation: 2162

directive not generating html

I am having a problem with my code basically i have this span (dynamically created via ng-repeat)

<span my-size id="abc"></span> <span my-size id="def"></span> <span my-size id="ghi"></span>

what I need to achieve is to get the id of each span and split its character and created checkbox and used the split[] i get when i split the id to be its value 

<span id="abc">
<input type="checkbox" value="a">
<input type="checkbox" value="b">
<input type="checkbox" value="c">
</span>

<span id="def">
<input type="checkbox" value="d">
<input type="checkbox" value="e">
<input type="checkbox" value="f">
</span>

<span id="ghi">
<input type="checkbox" value="g">
<input type="checkbox" value="h">
<input type="checkbox" value="i">
</span>

could anyone help me do this in angular js directives

this is all i have so far :

myApp.directive('mySize', function () {
    return {
    restrict: 'E',
    scope: { html: '@' },
    template: '<span ng-bind-html="html"></span>',
    link : function (scope, element, attrs) {
        scope.html="<h1>sample html </h1>";
    }
  }
});

I can't go further since my directives wont generate html tags

Upvotes: 0

Views: 66

Answers (4)

Yoshi
Yoshi

Reputation: 54649

I'm not sure what your initial intention was when writing the directive, because there is really no need to either use a link-function or ng-bind-html. For what you've asked the directive could be as simple as:

(function (app, ng) {
  'use strict';

  app.directive('mySize', function () {
    return {
      restrict: 'A',
      scope: { id: '@id' },
      template: '<input type="checkbox" data-ng-repeat="char in id track by $index" value="{{ char }}">'
    }
  });
  
}(angular.module('app', []), angular));
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>

<div data-ng-app="app">
  <span data-my-size id="abc"></span>
  <span data-my-size id="def"></span>
  <span data-my-size id="ghi"></span>
</div>

Edit

If you you want to add extra information just fiddle with the template. E.g.:

(function (app, ng) {
  'use strict';

  app.directive('mySize', function () {
    return {
      // actually obsolute, because it's the default setting
      restrict: 'A', 
      
      // reusing the directive name to simplify the required view-html,
      // but mapping it to a more fitting name when used internally
      scope: { str: '@mySize' }, 
      
      // the actual template (this time using a label)
      template: '<label data-ng-repeat="char in str track by $index"><input type="checkbox" value="{{ char }}"> {{ char }}</label>'
    }
  });
}(angular.module('app', []), angular));
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>

<div data-ng-app="app">
  <div data-my-size="abc"></div>
  <div data-my-size="def"></div>
  <div data-my-size="ghi"></div>
</div>

Upvotes: 3

sylwester
sylwester

Reputation: 16498

var app = angular.module('app', []);
app.directive('mySize', function($sce) {
  return {
    restrict: 'EA',
    scope: {
      id: '@'
    },
    template: '<label ng-repeat="i in array"><input type="checkbox" ng-value="i" >{{i}}<label>',
    link: function(scope, element, attrs) {

      scope.array = scope.id.split("")


    }
  }
});
app.controller('homeCtrl', function($scope) {




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

    <span my-size id="abc"></span> 
    <span my-size id="def"></span>
    <span my-size id="ghi"></span>

  </div>
</div>

Upvotes: 1

Kostya Shkryob
Kostya Shkryob

Reputation: 2369

It doesn't work because you restricted it's usage to element and use it as attribute. Change restrict: 'E' to restrict: 'A'.

Upvotes: 2

dfsq
dfsq

Reputation: 193291

The directive can look like this:

.directive('mySize', function() {
    return {
        restrict: 'AE',
        link: function(scope, element, attrs) {
            element[0].id.split('').map(function(el) {
                element.append('<label><input type="checkbox" value="' + el + '"> ' + el + '</label>');
            });
        }
    }
});

Demo: http://plnkr.co/edit/nZMEdUjMXG3MDYv19H5C?p=preview

Upvotes: 0

Related Questions