如何将变量从控制器传递到指令？

Question

HTML:

<div ng-repeat="item in productArr">
   {{ item.title }}
</div>
<div category-page-navigation current-page='currentPage' category-products-count='productsCount'></div>

JS:

.controller('categoryController', ['$scope', '$location', '$http', '$q', '$window', '$stateParams', function($scope, $location, $http, $q, $window, $stateParams) {

        $scope.currentPage = 1;
        $scope.productsCount = 0;               

        var GET = {
            getProductData: function() {
                var defer = $q.defer();

                $http.post('services/loadProduct.php', {
                    'id'    :1,
                }).then(function(response) {
                    defer.resolve(response);
                }, function(response) {             
                    defer.resolve([]);
                });         

                return defer.promise;               
            }
        };

        var getData = {
            getProduct: function() {
                var productData = GET.getProductData();

                $q.all([productData]).then(
                    function(response) {
                        $scope.productArr = response[0].data.products;
                        $scope.productsCount = response[0].data.products.length;
                    });         
            }
        };

        getData.getProduct(); 

    }])
    .directive('categoryPageNavigation', function($compile, $parse) {
        return {
            scope: {
                currentPage: '=currentPage',
                categoryProductsCount: '=categoryProductsCount'
            },
            link: function (scope, element, attrs) {
                debugger;
                // Here scope.categoryProductsCount = undefined
                // ...
                $scope.$watch(scope.currentPage, function(value) {
                    // ...
                });                             
            }
        };
    });

I try to form new HTML for navigation to manipulate with HTML I get from ng-repeat. In directive I need currentPage(from start =1) and total count of items from ng-repeat(length of array) witch I get from service. How I can pass variables to directive? First I need to get variables from service(ajax request or something else) then pass variables(some ather data) to directive.

Answer 1

If I understood correctly what you mean. Here is a code pen example on how to shared data between you controller and your directive.

A good read to understand the code below: https://docs.angularjs.org/guide/providers

http://codepen.io/chocobowings/full/Xmzxmo/

 var app = angular.module('app', []); //-------------------------------------------------------// app.factory('Shared', function() { return { sharedValue: { value: '', } }; }); //-------------------------------------------------------// app.controller('ctrl', function($scope, Shared) { $scope.model = Shared.sharedValue; }); //-------------------------------------------------------// app.directive('directive', ['Shared', function(Shared) { return { restrict: 'E', link: function(scope) { scope.model = Shared.sharedValue; }, template: '<div><input type="text" ng-model="model.value"/></div>' } } ]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app"> Ctrl: <div ng-controller="ctrl"> <input type="text" ng-model="model.value" /> <br/> </div> Directive: <directive value="model.value"></directive> </div>