2015-10-19 166 views
0

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请求或其他)获取变量,然后将变量(某些数据)传递给指令。

回答

0

如果我正确理解你的意思。以下是关于如何在您的控制器和您的指令之间共享数据的代码笔示例。

一个良好的阅读理解下面的代码: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>

+0

Probles是指令执行befor性反应的手柄。该如何解决? –

+0

我找到解决方案:http://stackoverflow.com/questions/30504496/angularjs-run-directive-after-success-of-http –

+0

是的,因为你的http调用是异步的,你将不得不等待,直到你在更新之前得到响应你的指示。如果您觉得您的问题已回答,请将其标为已回答。谢谢 :) –

相关问题