CODEWITHSUNDEEP
angularjs
ps0604
ps0604

Reputation: 1071

Changing first child div in directive

In this plunk I have a directive that's a div with orange border. I'm trying to (unsuccessfully) change the border color in the link function. The two lines change the directive div to green and red(try uncommenting each), not the first child (element[0]). How to make this work?

Javascript:

angular.module('app')
    .directive('dir1', function() {


    var directive = {};

    directive.restrict = 'E';

    directive.template = '<div style="width:200px;height:200px;border:2px solid orange">' + 
'<div style="width:100px;height:100px;border:2px solid black"></div></div>';

    directive.link = function(scope, element, attrs) {

      angular.element(element[0]).css('border','2px solid red');
      //element.css('border','2px solid green');

    };

    return directive;

});

UPDATE:

added an inner div, its color shouldn't change

Upvotes: 0

Views: 895

Answers (1)

eladcon
eladcon

Reputation: 5825

You can access your div with element.find. Try this:

element.find('div').eq(0).css('border', '2px solid blue')

Upvotes: 1

Related Questions