I'm encountering an issue where including another directive related to the current one results in the following error message
Error: [$compile:ctreq] http://errors.angularjs.org/1.2.10/$compile/ctreq?p0=myApp.pagereel&p1=ngTransclude
Script.js:
var myApp = angular.module('myApp', [])
.directive('viewport', function()
{
return {
restrict: 'E',
template: '<div class="viewport" ng-transclude></div>',
transclude: true,
replace: true
}
})
.directive('pagereel', function()
{
return {
controller: function ($scope)
{
$scope.next = function (colour)
{
if(typeof colour !== 'undefined')
{
$scope.pages.splice($scope.position + 1);
$scope.pages.push({colour: colour});
$scope.position++;
}
},
$scope.previous = function (colour)
{
if(typeof colour !== 'undefined')
{
$scope.pages = $scope.pages.slice(0, 1);
$scope.pages.push({colour: colour});
$scope.position = 1;
}
else
{
$scope.position--;
}
},
$scope.home = function (colour)
{
if(typeof colour !== 'undefined')
{
$scope.pages = [{colour: colour}];
}
$scope.position = 0;
}
},
restrict: 'E',
template: '<div class="pagereel" style="right: {{position * 100}}%; width: {{pages.length * 100}}%" ng-transclude></div>',
replace: true,
transclude: true,
link: function(scope, element, attrs)
{
scope.position = 0
scope.pages = [{colour: 'green'}];
}
}
})
.directive('page', ['$compile', function($compile)
{
return {
restrict: 'E',
template: '<section class="page" style="background: {{page.colour}}; width: {{ 100 / pages.length }}%" ng-transclude></section>',
replace: true,
scope: true,
transclude: true,
}
}])
.directive('next', function(){
return {
require: "pagereel",
restrict: 'E',
template: '<button ng-transclude></button>',
replace: true,
transclude:true,
link: function(scope, element, attrs, pagereelCtrl)
{
console.log(pagereelCtrl)
element.bind("click", function()
{
pagereelCtrl.next(attrs.colour)
})
}
};
});
Html:
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<viewport>
<pagereel>
<page ng-repeat="page in pages"><next color="blue">Next</next></page>
</pagereel>
</viewport>
<script src="script.js"></script>
</body>
</html>
How can I grant access to the "next" function in the controller of "pagereel"?