如何更改控制器中的值从指令到angularJS中获取新数据？

Question

我有大约五个控制器从服务器获取数据。其中之一是：

var vm = this; 


    //vm.paCountSummary.total = ; 

    var month = 1; 

    loadStatusCount(); 


    function loadStatusCount() { 
     vm.summaryCount = []; 

     statusCountService.setMonth(month); 
     statusCountService.setType('e'); 
     statusCountService.getStatusCount() 
        .then(function (report) { 
         applyCount(report); 
        }); 
    } 

    function applyCount(report) { 
     vm.summaryCount = report[0]; 
    } 


    vm.getTotal = function() { 
     var total = 0; 
     for (var i = 0; i < vm.summaryCount.length; i++) { 
      var count = vm.summaryCount[i].count; 
      total = total + count; 
     } 
     return total; 
    } 

控制器的其余部分具有相同的代码，但唯一的区别是type。

现在，我有一个显示该模板的指令。

monthlyReportApp.directive('statusCount', function() { 
    return { 
     //require: 'ngModel', 
     restrict: 'AE', 
     replace: false, 
     templateUrl: 'Scripts/app/views/templates/status-count-template.html', 
     link: linker 
    } 

    function linker(scope, el, attrs, ngModel) { 
     scope.title = attrs.title; 
     scope.class = attrs.class; 
    } 

}); 

我用它在HTML这样的：

<div status-count data-class="fa fa-check-square-o" data-title="Prior Auth Count" class="panel panel-default" ng-controller="PACountCtrl as ctrl"> 

       </div> 

这不是一个真正的问题，但我只是希望尽量减少重复。这就是说，如果我只想用一个控制器来调用不同的值的type的API，我怎么能从指令中做到这一点？因此，不同的div加载不同类型的数据，而不是创建5-6不同的控制器，基本上做同样的事情。

Answer 1

你可以从中动态想要的属性通过type。此外，您正在寻找多次使用此指令，因此请记住，指令应具有隔离范围，以使其成为更可重用的组件。所以我建议你让你指示使用隔离范围。

也并不认为像使用ng-controller因为你已经有一个地方在指令分配DOM控制器。您需要基本从DOM中删除它&从指令本身应用该控制器。然后从指令元素的属性传递statusType。这样就可以接收来自指令分离范围该值，那么你可以通过做scope.statusType收到你的指令中该值的价值和线路的实际代码看起来像statusCountService.setType(scope.statusType);。

但问题是，你正在使用您的控制器内controllerAs语法，并采取隔离范围内的值，所以在这种情况下，scope没有得到直接与控制器的this上下文绑定。为此，我们需要使用bindToController属性。其内部使用&结合控制器this上下文内的所有范围angular.bind API方法。在角度1.3 +你会有bindToController: true选项。但在角度1.4+这件事情是超级容易做。代替具有scope: { /* assign props here */ } &然后使用bindToController: true的，它们引入bindToController属性接受将被视为分离的范围，以及那些接收绑定将映射到controller s此上下文对象。

现在来看看如何将statusType传递给指令&有多种方法可以做到这一点，我将对其中一些最广泛使用的方法进行对比。你可以指定一些scope变量控制器内，其中指令元素属于像$scope.statusType = 'e'和指令元素上这将是status-type="{{statusType}}"，我们必须使用@（单程约束力的），这就是为什么我们需要通过内插的属性范围的变量。否则，你可以直接只通过expression为string像status-type="{{'e'}}"

另外，你需要使用bindToController: true让你的指令的控制器上下文（this）内提供的隔离范围值，将进行评估。

标记

<div status-count data-class="fa fa-check-square-o" 
    data-title="Prior Auth Count" 
    class="panel panel-default" 
    status-type="{{statusType}}"> 
</div> 

指令

monthlyReportApp.directive('statusCount', function() { 
    return { 
     //require: 'ngModel', 
     restrict: 'AE', 
     replace: false, 
     templateUrl: 'Scripts/app/views/templates/status-count-template.html', 
     link: linker, 
     controller: 'PACountCtrl', 
     controllerAs: 'ctrl', 
     //angular 1.3 + code need below to things scope: {}, bindToController 
     scope: { 
      statusType: "@" 
     }, 
     bindToController: true 
     //angular 1.4 + code need only bindToController 
     /* 
     bindToController: { 
      statusType: "@" 
     } 
     */ 
    } 

    function linker(scope, el, attrs, ngModel) { 
     scope.title = attrs.title; 
     scope.class = attrs.class; 
    } 
});