Angular Can't change ng-model form other directive - angularjs

Question

I need to change ng-model (currentPage) in pdfViewerToolbar directive by clicking on canvas in pdfViewer directive. The self.next function in controller is called when i clicking on canvas, but ng-model="currentPage" is not changed in pdfViewerToolbar directive.
app.angular.module("pdf").directive("pdfViewerToolbar", ["pdfDelegate", function(e) {
return {
restrict: "E",
template: '<div class="pdf_navigation" ng-show="navBar">\
<div class="pdf_buttons">\
<div ng-click="prev()" class="goPrevious" title="previous page"></div>\
<div ng-click="next()" class="goNext" id="goNext" title="next page"></div>\
<div ng-click="zoomOut()" class="zoomIn"></div>\
<div ng-click="zoomIn()" class="zoomOut"></div>\
</div>\
<div class="pdf_page">\
<span>Page</span>\
<input type="text" min=1 ng-model="currentPage" maxlength="4" ng-change="goToPage()" >\
<span>of {{pageCount}}</span>\
</div>\
</div>',
scope: {
pageCount: "=",
navBar: "=",
},
// controller: "PdfCtrl",
link: function(t, n, a) {
var o = a.delegateHandle;
t.currentPage = 1, t.prev = function() {
e.$getByHandle(o).prev(), r()
}, t.next = function() {
e.$getByHandle(o).next(), r()
}, t.zoomIn = function() {
e.$getByHandle(o).zoomIn()
}, t.zoomOut = function() {
e.$getByHandle(o).zoomOut()
}, t.rotate = function() {
e.$getByHandle(o).rotate()
}, t.goToPage = function() {
e.$getByHandle(o).goToPage(t.currentPage)
};
var r = function() {
t.currentPage = e.$getByHandle(o).getCurrentPage()
}
}
}
}])
app.angular.module("pdf").directive("pdfViewer", ["pdfDelegate", function(r) {
return {
restrict: "E",
template: '<div show-control class="pdf_doc"><pdf-viewer-toolbar ng-if="showToolbar" delegate-handle="{{id}}" page-count="pageCount" nav-bar="pdfNavigationBar"></pdf-viewer-toolbar><canvas ng-click="next()" id="pdf-canvas" ></canvas></div>',
scope: false,
controller: "PdfCtrl",
link: function(e, t, n) {
e.id = n.delegateHandle, e.showToolbar = e.$eval(n.showToolbar) || !1
var o = n.delegateHandle;
e.currentPage = 1,
e.next = function() {
r.$getByHandle(o).next(), s()
}
var s = function() {
e.currentPage = r.$getByHandle(o).getCurrentPage()
}
}
}
}]);
app.controller('PdfCtrl', [
'$scope',
'$element',
'$attrs',
'pdfDelegate',
'$log',
'$q', '$rootScope',
function($scope, $element, $attrs, pdfDelegate, $log, $q, $rootScope) {
// Register the instance!
var deregisterInstance = pdfDelegate._registerInstance(this, $attrs.delegateHandle);
// De-Register on destory!
$scope.$on('$destroy', deregisterInstance);
var self = this;
var url = $scope.$eval($attrs.url);
var headers = $scope.$eval($attrs.headers);
var pdfDoc;
$scope.pageCount = 0;
var currentPage = 1;
var angle = 0;
var scale = $attrs.scale ? $attrs.scale : 1;
var canvas = $element.find('canvas')[0];
var ctx = canvas.getContext('2d');
self.next = function() {
if (currentPage >= pdfDoc.numPages)
return;
currentPage = parseInt(currentPage, 10) + 1;
renderPage(currentPage);
console.log('currentPage'+currentPage);
};
return PDFJS
.getDocument(docInitParams)
.then(function (_pdfDoc) {
console.log('loaded');
$rootScope.loadPdf = $scope.pdfNavigationBar = true;
pdfDoc = _pdfDoc;
renderPage(1);
$scope.$apply(function() {
$scope.pageCount = _pdfDoc.numPages;
});
}, function(error) {
$log.error(error);
return $q.reject(error);
})
};
if(url) self.load();
}]);

Answer 1

You need to pass the currentPage variable as isolated directive like below.
return {
restrict: "E",
template: '<div class="pdf_navigation" ng-show="navBar">\
<div class="pdf_buttons">\
<div ng-click="prev()" class="goPrevious" title="previous page"></div>\
<div ng-click="next()" class="goNext" id="goNext" title="next page"></div>\
<div ng-click="zoomOut()" class="zoomIn"></div>\
<div ng-click="zoomIn()" class="zoomOut"></div>\
</div>\
<div class="pdf_page">\
<span>Page</span>\
<input type="text" min=1 ng-model="currentPage" maxlength="4" ng-change="goToPage()" >\
<span>of {{pageCount}}</span>\
</div>\
</div>',
scope: {
pageCount: "=",
navBar: "=",
currentPage: "="
},
...
...
...
and now pass that currentPage from pdfViewer directive template like below:
app.angular.module("pdf").directive("pdfViewer", ["pdfDelegate", function(r) {
return {
restrict: "E",
template: '<div show-control class="pdf_doc"><pdf-viewer-toolbar ng-if="showToolbar" delegate-handle="{{id}}" page-count="pageCount" nav-bar="pdfNavigationBar" current-page="currentPage" ></pdf-viewer-toolbar><canvas ng-click="next()" id="pdf-canvas" ></canvas></div>',
scope: false,
controller: "PdfCtrl",
and now define the variable in the scope of the controller PdfCtrl and access from the same.
app.controller('PdfCtrl', [
'$scope',
'$element',
'$attrs',
'pdfDelegate',
'$log',
'$q', '$rootScope',
function($scope, $element, $attrs, pdfDelegate, $log, $q, $rootScope) {
// Register the instance!
var deregisterInstance = pdfDelegate._registerInstance(this, $attrs.delegateHandle);
// De-Register on destory!
$scope.$on('$destroy', deregisterInstance);
var self = this;
var url = $scope.$eval($attrs.url);
var headers = $scope.$eval($attrs.headers);
var pdfDoc;
$scope.pageCount = 0;
$scope.currentPage = 1;
var angle = 0;
var scale = $attrs.scale ? $attrs.scale : 1;
var canvas = $element.find('canvas')[0];
var ctx = canvas.getContext('2d');
self.next = function() {
if ($scope.currentPage >= pdfDoc.numPages)
return;
$scope.currentPage = parseInt($scope.currentPage, 10) + 1;
renderPage($scope.currentPage);
console.log('currentPage'+$scope.currentPage);
};

Answer 2

In your pdfViewerToolbar directive scope is isolated, and if you want change something in that directive you sould pass it as scope element with two way databinding:"=".
scope: {
pageCount: "=",
navBar: "=",
currentPage:"="
}
and use your directive passing controller model like this
<pdf-viewer-toolbar page-count="ctrlModelPageCount" nav-bar="ctrlModelNavBar" current-page="ctrlModelCurrentPage"></pdf-viewer-toolbar>