how to idividually append directive to div in angularjs

Question

HTML:

<div ng-app = "myApp" ng-controller = "someController as Ctrl">

<div class = "clickme" ng-repeat = "elems in Ctrl.elem" ng-click ="click()">
    {{elems.title}}
    click me
    <div id="container">
    </div>
</div>

angularjs

var Elems = [{title : "1"},
         {title : "2"},
         {title : "3"}];

var myApp = angular.module('myApp', []);
myApp.controller('someController', function($scope) {
    var self = this;
    self.elem = Elems;
    $scope.click = function(){
        //append directive <test-Input></test-Input>
    };

});

myApp.directive('testInput',function(){
     return {
          restrict: 'E',
          replace: false,
          transclude: false,
          template: '<div>asdasdasdasd</div>',
          controller: function($scope) {

         }
      };
});

how to append directive to individual div when it clicked? I know it will be very easy with Jquery but it's hard to do in angular way.

LionC · Accepted Answer · 2015-10-07 12:12:29Z

1

You do not want to do it this way, one of Angulars advantages is that you do not have to deal with changing the HTML yourself, but use data-binding and templates instead, establishing an MVC-pattern. You are still thinking in jQuery ;-)

Change only your data on click and use ng-repeat to make angular append your template for you.

P.S.: Why do you use $scope in your controller? You are using controller as-sntax (which is good), you can simply bind the click()-funciton to the controller instead of $scope

edited Oct 7, 2015 at 12:12

answered Oct 7, 2015 at 12:09

LionC

3,1061 gold badge24 silver badges31 bronze badges

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

1 Comment

HyeSung Bak Over a year ago

oh I missed that $scope thing It's mixed with another one thanks!!

NiranjanK · Accepted Answer · 2015-10-07 12:08:58Z

0

Try this..

var modalElementTemplate = angular.element(Your template);
var linkFn = $compile(modalElementTemplate);
var modalElement = linkFn($scope);
$("#WheretoAppend").append(modalElement);

answered Oct 7, 2015 at 12:08

NiranjanK

4372 gold badges6 silver badges23 bronze badges

1 Comment

LionC Over a year ago

This is really not the way you should write angular code.

morels · Accepted Answer · 2015-10-07 12:18:16Z

0

Instead of doing a huge DOM alteration put the testInput directive in the ngRepeat loop and add a check at the top of the directive whether the div container has been clicked or not (need scope isolation).

answered Oct 7, 2015 at 12:18

morels

2,11520 silver badges24 bronze badges

Collectives™ on Stack Overflow

how to idividually append directive to div in angularjs

3 Answers 3

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Related