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＆amp;从指令本身应用该控制器。然后从directive元素的属性传递statusType。因此，您可以从指令隔离范围接收该值，然后您可以通过执行scope.statusType在您的指令中接收该值，并且您的实际代码行看起来像statusCountService.setType(scope.statusType);。

但问题在于您在控制器中使用controllerAs语法并在隔离范围内获取值，因此在这种情况下scope不会直接与this上下文绑定控制器。为此，我们需要使用bindToController属性。其中内部使用angular.bind API方法＆amp;绑定控制器this上下文中的所有范围。在角度1.3 +中，您将拥有bindToController: true选项。但是在角度1.4+中这个东西很容易做到。而不是scope: { /* assign props here */ }＆amp;然后使用bindToController: true，他们引入bindToController属性来接受将被视为孤立范围的对象，以及那些接收到的绑定将映射到此上下文的controller。

现在是时候看看如何将statusType传递给指令＆amp;有多种方法可以做到这一点，我将对其中一些最广泛使用的方法进行对比。您可以在控制器内部指定一些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;
    }
});

如何在controller中更改控制器中的值以获取angularJS中的新数据？

1 个答案: