1

I have a html file that runs a ng-repeat and then each item in that ng-repeat will generate a template which also has it's own controller

On the html file I have something like:

<div ng-repeat="item in items">
  <div ng-include="'template.html" ng-init="getData(item)"></div>
</div>

And then this template has it's own controller.

The controller has the function getData(item) and looks something like this:

$scope.getData = function(item){
 var chapter = item;
}

$scope.myVec = chapter.myVec.length;

template.html looks like:

<div ng-controller = "Controller">

<p>{{myVec}}</p>

</div>

And then I get an error on the console saying "Cannot read property 'length' of undefined"

What am I missing here? Is the controller running before the function that defines the var chapter?

N.Car
  • 492
  • 1
  • 4
  • 14
  • instead of using `ng-include` and `ng-init` with an inner `ng-controller`, you really should consider making this a directive. the `ng-init` won't really work here, since it is bound to the outer controller, but you want the data on the inner controller. – Claies Sep 24 '17 at 19:38
  • Yeah, I think I got it now. Running the function on ng-init will only get the data within the function's scope and not the whole controller – N.Car Sep 24 '17 at 19:46
  • 1
    I wrote a quick directive that *does what I think you are trying to accomplish*; let me know if it helps (or doesn't): http://plnkr.co/edit/aoLzsSmmszeJiVa7znXY?p=preview – Claies Sep 24 '17 at 20:00
  • Yeah I see what you did there! Thank you, it works! I also found another solution. I used $scope.$parent and the item that's in the parent scope. Because the controller of the template is within the other controller this solves the issue! Thank you for your solution also! – N.Car Sep 24 '17 at 20:52

2 Answers2

0

I guess it's because chapter is a local variable to your $scope.getData function. For example

function foo(num){
   var myNum=num
}
foo(3)
console.log(myNum) // your will get undefinied

do this instead

var myNum
function foo(num){
   myNum=num
}
foo(3)
console.log(myNum) // your will get 3
Fan Cheung
  • 10,745
  • 3
  • 17
  • 39
  • I tried declaring the variable before the function now and i still get undefined. maybe it is kind of "running" the whole code before the ng-init gets called in the html file. So he doesn't know the field myVec in the object chapter – N.Car Sep 24 '17 at 16:53
0

Actually the problem is from the ng-repeat u r sending the item (which is an array element, primitive type not an object) to the function getData(). That's why it returns cannot read property length undefined. I hope this helps you. 

Var items = [ 'apple',  'mango'] ;
items.length //2
Items[0].length // error
Madhankumar
  • 390
  • 4
  • 12
  • the ng-repeat is "repeating" objects within a vector. then each object has a field that is a vector, myVec. So it should be able to get the length. this is definitely a scope issue – N.Car Sep 24 '17 at 19:44
  • Can you please update your items array with some mock data?So that we can figure out the actual issue. – Madhankumar Sep 25 '17 at 13:42
  • I took a different approach. I used $scope.$parent because the template controller is within another controller, which has the data I was passing through. This way I only pass exactly what I need – N.Car Sep 28 '17 at 19:34