如何将控制器中的值从指令更改为在 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 不会直接与 [=19= 绑定] 控制器的上下文。为此，我们需要使用 bindToController 属性。它在内部使用 angular.bind API 方法并绑定控制器 this 上下文中的所有范围。在 angular 1.3 + 中，您将有 bindToController: true 选项。但是在 angular 1.4+ 中，这件事非常容易做到。他们没有使用 scope: { /* assign props here */ } 然后使用 bindToController: true，而是引入了 bindToController 属性来接受将被视为隔离范围的对象以及那些接收到的绑定将映射到 controller是这个上下文。

现在是时候看看如何将 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;
    }
});

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

How to change the value in controller from directive to fetch new data in angularJS?

javascript

angularjs

angularjs-directive

angularjs-scope

angularjs-controller