How pass variables to directive from controller?

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.

score 0 · Accepted Answer · answered Oct 19 '15 at 00:50

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>

Probles is that directive execute befor responce handle. How fix that? — Darien Fawkes, Oct 19 '15 at 16:40
I find solution: http://stackoverflow.com/questions/30504496/angularjs-run-directive-after-success-of-http — Darien Fawkes, Oct 19 '15 at 17:07
Yes since your http call is asynchronous you will have to wait until you get a response before updating your directive. If you feel that you question was answered please mark it as answered. Thanks :) — F.P, Oct 19 '15 at 19:57

How pass variables to directive from controller?

1 Answers1