In angularjs, how to use controller's method in custom directive?

Question

In the javascript file, the code is like this:

angular.module("amodule")
  .directive("bdirective",function(){
    return{
      scope: {
        testIsolated: '&test',
      },
      restrict:'EA',
      replace: true,
      templateUrl: "address.html",
    }
  .controller{"ccontroller",function($scope){

    $scope.test=function(){
                           w="changed"
                           return w;
                          };
    };

In the index.html file, the code is like this:

<bdirective testIsolated="test()"></bdirective>
...

In the address.html file, the code is like this:

<button ng-click="result=testIsolated()">Button1</button>
...

I think when the Button1 is clicked, testIsolated should run, and then test() should run. The value of "result" should be changed to "changed".

But it doesn't work

Can anyone help me figure it out?

Thanks in advance

Hello. This seems like a useful question but the language is a little vague - it's hard to pick up at a glance what issue you are having, could you tweak this question to focus on the issue, maybe add a bold one line statement outlining what you'd like clear up — Code Whisperer
– Code Whisperer, Commented Aug 20, 2015 at 23:32

New Dev · Accepted Answer · 2015-08-20 23:51:27Z

1

It would have worked if you:

#1 either changed the attribute to test:

<bdirective test="test()"></bdirective>

Or, #2 changed how your isolate scope binding was defined:

scope: {
   testIsolated: "&"
}

and the attribute was hyphenated to test-isolated due to how Angular normalizes attributes:

<bdirective test-isolated="test()"></bdirective>

edited Aug 20, 2015 at 23:51

answered Aug 20, 2015 at 23:41

New Dev

49.8k12 gold badges99 silver badges139 bronze badges

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

6 Comments

Bluesea Over a year ago

Thx. how should I call the test() method in address.html?

New Dev Over a year ago

@Bluesea, exactly like you do right now... you just have a mismatch between between the attribute of bdirective and the bound scope variable

New Dev Over a year ago

@Bluesea, here's a demo with approach #1: plnkr.co/edit/IN3XbWtRPFRZf1fKZDli?p=preview. It's the same as your code with minor fixes

Bluesea Over a year ago

I would really appreciate it if you can make test() have an argument in the Demo. For example: $scope.test=function(date){ var w="Today is"+date; return w; }.

New Dev Over a year ago

@Bluesea, this is really a different question - a question about how to pass local variables into the bound expressions - and should have been asked separately. Anyway, this is how it can be done: plnkr.co/edit/OnRED9iekq9g0lYd2kps?p=preview

|

Collectives™ on Stack Overflow

In angularjs, how to use controller's method in custom directive?

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related