Angularjs Directive finding element inside ngIf

Question

I have created a angularjs directive that are supposed to display an address.

$(elem).find('button').length

now return the correct value but it have been called a hack and is there a better way to do it. I understand that ngIf creates a child scope and the button element isn't available when my link code runs if I don't wrap it in $timeout.

So what is the pretty way to access the element inside my ngIf without the $timeout hack?

My Directive

angular.module('directives')
.directive('addresss', ['$timeout', function ($timeout) {

    return {
        restrict: 'AE',
        scope: {
            address: '='
        },
        templateUrl: 'template........ ',
        link: function(scope,elem,attr){
            $timeout(function(){
                console.log($(elem).find('button').length);
            })
        }

    };
}]);

Template for address directive

<div class="spacer">
    <h1>Address</h1>

    <div>
        <strong>{{address.name}}</strong>
    </div>
    <div ng-if="address.name">
        <button class="btn-link">Delete</button>
    </div>

</div>

@charlietfl I just need that button to attach a click event. I can do that now but are looking for better solution. — pethel
– pethel, Commented Nov 22, 2014 at 13:48
imo you've got all you need in the directive put the if in it :) — Whisher
– Whisher, Commented Nov 22, 2014 at 14:16

Wawy · Accepted Answer · 2014-11-24 09:54:00Z

1

if all you want to bind a click event you could just put a ng-click in the button:

JS:

app.directive('address', [function () {

    return {
        restrict: 'AE',
        scope: {
            address: '='
        },
        templateUrl: 'template.html ',
        link: function(scope,elem,attr){
          scope.myClickHandler = function() {
            console.log('button clicked');
          });
        }

    };

Template:

<div class="spacer">
    <h1>Address</h1>

    <div>
        <strong>{{address.name}}</strong>
    </div>
    <div ng-if="address.name">
        <button ng-click="myClickHandler()" class="btn-link">Delete</button>
    </div>

</div>

edited Nov 24, 2014 at 9:54

answered Nov 22, 2014 at 14:22

Wawy

6,2692 gold badges26 silver badges24 bronze badges

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

3 Comments

pethel Over a year ago

I like the ng-click approach more

charlietfl Over a year ago

ready() isn't used at element level and isn't doing what you think it is

pethel Over a year ago

I give you this because of the ng-click suggestion

Whisher · Accepted Answer · 2014-11-22 16:46:00Z

0

Try this (if I get well your question)

html

<div data-ng-controller="MainController">
  <div data-my-dir address="address"></div>
</div>

js

angular.module('myApp', [])
.controller('MainController',function($scope) {
    $scope.address = {
        name : 'myname'
    };
})
.directive("myDir", function () {
    return {
        scope:{
            address: '=',
        },
        template:'<button class="btn-link" ng-if="address.name">Delete</button>',
        link: function (scope, elem) {
            console.log(scope.address.name);        
        }
    }
 });

answered Nov 22, 2014 at 16:46

Whisher

32.9k34 gold badges129 silver badges204 bronze badges

Collectives™ on Stack Overflow

Angularjs Directive finding element inside ngIf

2 Answers 2

3 Comments

html

js

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

html

js

Comments

Your Answer

Sign up or log in

Post as a guest

Related