如何將變量傳遞給來自控制器的指令？

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) { 
        // ... 
       });        
      } 
     }; 
    }); 

我試圖形成導航與HTML操縱我從納克重複獲得新的HTML。 在指令中，我需要currentPage（從start = 1）和從服務中獲得的ng-repeat（數組長度）的總數。我如何將變量傳遞給指令？首先，我需要從服務（ajax請求或其他）獲取變量，然後將變量（某些數據）傳遞給指令。

Answer 1

如果我正確理解你的意思。以下是關於如何在您的控制器和您的指令之間共享數據的代碼筆示例。

一個良好的閱讀理解下面的代碼：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>