Angular Can't change ng-model form other directive

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);
    };