Angular scope function parameter return undefined

Question

I'm calling a controller function from directive but the function parameter returns undefined when I console.log to check the value. Wondering what I'm doing wrong or maybe a step I forgot. I actually hard coded a value to see if this shows but only get undefined in the console. NOTE: The custom directive template is coming from external file so the function parameter is not being past to the controller. It only works if the custom directive element has the value attached. Should work with the inside directive html.

//********************  Directive  ********************//
app.directive('customdir', [function() {
  return {
    restrict:   "E",
    template : "<div>Get product<button ng-click="addToCart(56)">Add to Cart</button></div>",
    scope:      {    
      addToCart:"&"
    },
    link: function(scope, el, attrs) {

    }
  };  
}]);



//********************  Controller  ********************// 
app.controller('mycontroller', function($scope) {

 $scope.addToCart = function(thumbProductId){
     $scope.thumbProductId = thumbProductId;
     console.log("thumbProductId =" + $scope.thumbProductId); // Returns Undefined

    };
});



//********************  Html  ********************//
<html>
     <div ng-controller="mycontroller">
        <custom-dir add-to-cart="addToCart(thumbProductId)">  </custom-dir>

     </div>
  </html>

inspect the value of thumbProductId at runtime using the chrome debugging tools. Or simply just log out the thumbProductId that is being passed in — James Considine, Aug 24 '16 at 15:18
This issue is that the directive external template is not returning the data. If I put the value on the custom directive element it works but inside html doesn't work. — icode, Aug 24 '16 at 15:38
Working now! This is what I needed. http://stackoverflow.com/questions/13318726/easiest-way-to-pass-an-angularjs-scope-variable-from-directive-to-controller — icode, Aug 24 '16 at 16:24

score 1 · Answer 1 · answered Aug 24 '16 at 15:13

1

There were a couple things wrong in the code, the first being "customdir" not having a "-" between it, as there's no capital. You also need to escape certain characters in your html, such as quotations and forward slashes. Here's a plunkr of your example:

http://plnkr.co/edit/FYUGBfIPtrl6Q7GWd597?p=preview

And the directive now looks:

myApp.directive('customdir', [function() {
  return {
    restrict:   "E",
    template : "<button ng-click=\"addToCart(thumbProductId)\">Add to Cart<\/button>",
    scope:      {    
      addToCart: "&"
    }
  };  
}]);

answered Aug 24 '16 at 15:13

cullimorer

755
1
5
23

Yeah demo works fine. I'm still getting undefined. The template is actually coming from a external file so I can't use the slashes in the html. I'm guessing maybe the reason I'm getting undefined. – icode Aug 24 '16 at 15:24
When I put the value on the directive element like you have it works but what if you have html code inside of the directive that need to access the value ? I need to get the data inside of the directive and return back to the controller. – icode Aug 24 '16 at 15:29
Do you mean like this? Now I am passing in the value from a text box to the directive, setting it's value in the controller and then rendering it on the HTML page: http://plnkr.co/edit/FYUGBfIPtrl6Q7GWd597?p=preview – cullimorer Aug 24 '16 at 15:39
Not like that. Directive can use a external html file. This file will have data. I will like to use a function to get the data from the external html. The html template is not setup in the directive it just call the file getmydirectivetemplate.html – icode Aug 24 '16 at 15:45
You can pass the html template into a "templateUrl" property in the directive. The principle of using variables in the HTML file are the same as the template we've just used. Are you asking how to dynamically add templates to directives? If so, here's an example of someone doing just that: http://stackoverflow.com/a/37782407/5349719 – cullimorer Aug 24 '16 at 15:51
No.. The value is inside of the html of the directive. How to show it in the controller. – icode Aug 24 '16 at 16:02
Got it working!!! This is what I needed. stackoverflow.com/questions/13318726/…. Thanks for all your help definitely learn some other angular skills. – icode Aug 24 '16 at 16:34

georgeawg · Answer 2 · 2016-08-24T18:29:42.827

Exposing Local Values to Parent Scope with Directive Expression Binding

To use Expression Binding to pass data from directive scope to parent scope, invoke the expression with a locals object.

myApp.directive('customdir', function() {
  return {
    restrict:   "E",
    template : "<button ng-click='addToCart({$id: 56})'>Add 56 to Cart</button>",
    scope:      {    
      addToCart: "&"
    }
  };  
});

The above directive invokes the Angular Expression defined by the add-to-cart attribute with the value 56 exposed as $id.

The HTML:

<div ng-controller="mycontroller">

    <customdir add-to-cart="thumbProductId =  $id">  </customdir>
    ThumbProductId => {{thumbProductId}}

</div>

When the user clicks on the button in the customdir element, the Angular Expression invoked will set thumbProductId to the value exposed by $id which in this case is 56.

To invoke a parent function with a local, simply make the Angular Expression a function:

 <customdir add-to-cart="parentFn($id)">  </customdir>

The DEMO on PLNKR.

Angular scope function parameter return undefined

2 Answers2

Exposing Local Values to Parent Scope with Directive Expression Binding