calling function in a controller from a directive view, angularJS

Question

I am trying to use ng-click to call two functions, in the html for a directive. The first function, 'checkUrl', is in the directives controller, and is working fine.

The second function, 'findUrl', is in the main app controller, and is not being fired.

HTML:

<div class="status" ng-click="checkUrl()">
    <b ng-click="checkUrl()">{{card.status}}</b>
</div>
<div ng-click="findUrl()" class="image">
    <img ng-src={{card.image}} alt="">
</div>

I have a couple of questions:

1) Is this because the two controllers have different scopes, and one can't access the other?

2) How can I get the directives view/html to invoke the main controllers function?

directive's controller:

$scope.checkUrl = function() {
    console.log("invoking checkUrl from the directive's controller.")
    asnService.showUrl();
};

application controller:

$scope.findUrl = function() {
    console.log("invoking findUrl from the app controller");
    asnService.showUrl();
};

Best practice is to not use $scope and use controllerAs. If you don't see an identifier before the function like something.findUrl() then it is an anti-pattern by today's Angular conventions. — elclanrs
– elclanrs, Commented Jan 25, 2016 at 17:57
yes they can have different scopes particularly if you declared isolated scope in directive. Show directive code — charlietfl
– charlietfl, Commented Jan 25, 2016 at 18:07
To answer your question, you can use $scope.$parent.findUrl() to access the scope variables on the parent scope of your directive. Not necessarily recommended, but it works. — Scottie
– Scottie, Commented Jan 25, 2016 at 18:38
@elclanrs I will practice using controllerAs, will be posting a question about that shortly. — devdropper87
– devdropper87, Commented Jan 25, 2016 at 19:28

Scottie · Accepted Answer · 2016-01-25 20:50:00Z

1

To answer your question, you can use $scope.$parent.findUrl() to access the scope variables on the parent scope of your directive. Not necessarily recommended, but it works.

answered Jan 25, 2016 at 20:50

Scottie

11.3k21 gold badges75 silver badges115 bronze badges

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

2 Comments

moosefetcher Over a year ago

As a relative newbie to angular, I'd be interested to hear why this is not necessarily recommended. It seems like there are a lot of 'unspoken' no-no's with angular and the fact they usually aren't apparent to me says I am not appreciating the wider concepts.

Scottie Over a year ago

@moosefetcher, the reason using $parent isn't recommended is that it tightly binds your child component to your parent. It no longer becomes re-usabe because now there is a specific dependency to this variable. In this case, now your parent controller MUST have a function called findUrl(). However, while not recommended, there are times when it's appropriate. I've used it $parent many times.

vorant · Accepted Answer · 2016-01-25 19:49:45Z

Here is 3 ways:

First

if have not isolated scope in directive your example works fine https://jsfiddle.net/vorant/waf8rta2/1/

Second

if scope in your directive isolated, add this code in directive's controller

    $scope.findUrl = function() {
        $scope.$parent.findUrl();
    };

https://jsfiddle.net/vorant/waf8rta2/2/

Best way use $emit (directive have to has isolated scope)

directive's controller:

    $scope.findUrl = function() {
        $scope.$emit('status:findUrl');
    };

application controller:

    $scope.$on('status:findUrl',function(){
        $scope.findUrl();
    });

https://jsfiddle.net/vorant/waf8rta2/4/

Collectives™ on Stack Overflow

calling function in a controller from a directive view, angularJS

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related