With reference to the following code snippet:
Plunker Demo 1 which is working fine, I've made the following changes:
HTML
<!DOCTYPE html> <html ng-app="MultiplicationApp"> <head> <link rel="stylesheet" href="multiplication-app.css"> </head> <body ng-init="data='x'"> <div multiplication-table x="5" y="5"> {{ multiplication.value }} </div> <script type="text/javascript" src="//code.angularjs.org/1.3.6/angular.js"></script> <script src="multiplication-app.js"></script> </body> </html> multiplication-app.js
var ngModule = angular.module('MultiplicationApp', []) ngModule.directive('multiplicationTable', [function() { return { templateUrl : 'multiplication-table-tpl.html', controllerAs : 'ctrl', transclude: true, bindToController: true, scope: { x : '=', y : '=' }, controller : function() { var x = this.x || 0; var y = this.y || 0; var table = this.rows = []; for(var i=0;i<y;i++) { var array = table[i] = []; for(var j=0;j<x;j++) { array.push(1); } } } } }]); ngModule.directive('multiplicationCell', [function() { return { controllerAs : 'multiplication', bindToController: true, scope: { x : '=', y : '=' }, controller : function() { var x = this.x || 0; //why does this does not resolve the x="$index+1" attribute in the directive. var y = this.y || 0; //why does this does not resolve the y="$parent.$index+1" attribute in the directive. this.value = x * y; // console.log(this); } }; }]); multiplication-table.tpl.html
<div ng-repeat="row in ctrl.rows track by $index"> <div ng-repeat="cell in row track by $index"> <div multiplication-cell x="$index+1" y="$parent.$index+1" ng-transclude> </div> </div> </div> I am unable to understand why I'm unable to access the multiplication.value from the multiplication controller inside the inner-nested tag.
I've created this plunk to demonstrate this.
I'm looking for answers to the following:
- Why the second Plunk is not working as intended ?
- How to make the second plunk working using minimal changes. And this solution should not be identical to the first Plunker.
Note: The multiplicationCell implementation is similar to the multiplicationTable but still not working.
