从控制器调用 angularjs 指令函数答案

【问题标题】：Call angularjs directive function from controller从控制器调用 angularjs 指令函数
【发布时间】：2021-04-06 06:43:01
【问题描述】：

我有一个指令需要时不时地做一些事情，假设它必须计算一些东西。如果我使用 $scope 的基本语法来绑定 count 函数，它就可以正常工作。但是当我们以语法形式切换到控制器时，它不会绑定函数。这是一个工作的 plunker：https://plnkr.co/edit/C2wVaeOm63SLnXBG?open=lib%2Fscript.js&deferRun=1&preview

angular
  .module('plunker', [])
  .controller('MainCtrl', function ($scope) {
    var vm = this;
    vm.name = 'Plunker';
    setInterval(function () {
      $scope.count();
    }, 1000);
    setInterval(function () {
      $scope.count2();
    }, 1000);
    setInterval(function () {
      $scope.count3();
    }, 1000);
  })

  .directive('test', function () {
    return {
      scope: {
        count: '=',
      },
      controller: function ($scope) {
        $scope.i = 0;
        $scope.count = function () {
          $scope.i++;
          console.log($scope.i);
        };
      },
    };
  })

  //with bindToController
  .directive('test2', function () {
    return {
      scope: {
        count: '=',
      },
      bindToController: true,
      controller: function ($scope) {
        var vm = this;
        vm.i = 0;
        vm.count = function () {
          vm.i++;
          console.log(vm.i);
        };
      },
    };
  })

  //with bindToController - the new way
  .directive('test3', function () {
    return {
      scope: true,
      bindToController: {
        count: '=',
      },
      controller: function ($scope) {
        var vm = this;
        vm.i = 0;
        vm.count = function () {
          vm.i++;
          console.log(vm.i);
        };
      },
    };
   });

HTML

<body ng-app="plunker" ng-cloak>
    <div ng-controller="MainCtrl as vm">
      <h1>Hello {{vm.name}}</h1>
      <test count="count"></test>
      <test2 count="count2"></test>
      <test3 count="count3"></test>
    </div>
  </body>

【问题讨论】：

标签： angularjs angularjs-directive parameter-passing angularjs-controlleras

【解决方案1】：

如果你使用的是 bindToController 语法，那么你应该在指令链接函数中声明你的指令计数函数，因为绑定是在指令控制器初始化之后发生的。

您在此处修改的示例：

  //with bindToController
  .directive('test2', function () {
    return {
      scope: {
        count: '=',
      },
      bindToController: true,
      controller: function ($scope) {
        var vm = this;
        vm.i = 0;
      },
      link:function($scope,$element,$attr,ctrl){
        ctrl.count = function () {
          ctrl.i++;
          console.log('test2',ctrl.i);
        };
      }
    };
  })

或者你可以在这里查看我修改过的插件： https://plnkr.co/edit/TKTtObbDTcFFC9SS?open=lib%2Fscript.js&deferRun=1

【讨论】：

它工作得很好。像这样封装 count() 函数是不好的做法？ plnkr.co/edit/…

【解决方案2】：

angular
  .module('plunker', [])
  .controller('MainCtrl', function ($scope, $interval) {
    var vm = this;
    vm.name = 'Plunker';
    ̶s̶e̶t̶I̶n̶t̶e̶r̶v̶a̶l̶(̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶)̶ ̶{̶
    $interval(function () {
      $scope.count();
    }, 1000);

使用$interval 服务。

AngularJS 通过提供自己的事件处理循环来修改正常的 JavaScript 流程。这将 JavaScript 拆分为经典和 AngularJS 执行上下文。只有在 AngularJS 执行上下文中应用的操作才能受益于 AngularJS 数据绑定、异常处理、属性监视等。

有关详细信息，请参阅

AngularJS $interval Service API Reference

【讨论】：

谢谢，我仅使用 setInterval 举例。无论如何，将 setInterval 更改为 $interval 并得到相同的结果：plnkr.co/edit/…