CODEWITHSUNDEEP
javascripthtmlangularjs
HyeSung Bak
HyeSung Bak

Reputation: 13

how to idividually append directive to div in angularjs

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.

Upvotes: 0

Views: 99

Answers (3)

morels
morels

Reputation: 2105

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).

Upvotes: 0

LionC
LionC

Reputation: 3106

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

Upvotes: 1

NiranjanK
NiranjanK

Reputation: 437

Try this..

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

Upvotes: 0

Related Questions