从控制器调用angularjs指令函数_Angularjs_Angularjs Directive_Parameter Passing_Angularjs Controlleras

从控制器调用angularjs指令函数

angularjs

从控制器调用angularjs指令函数,angularjs,angularjs-directive,parameter-passing,angularjs-controlleras,Angularjs,Angularjs Directive,Parameter Passing,Angularjs Controlleras,我有一个指令，需要时不时地做一些事情，比如说它必须计算一些事情。如果我使用$scope的基本语法来绑定count函数，它就可以正常工作。但是当我们以语法形式切换到控制器时，它不会绑定函数。这是一个正在工作的plunker： JS HTML 你好{{vm.name} 使用$interval服务 AngularJS通过提供自己的事件处理循环来修改正常的JavaScript流。这将JavaScript分为经典和AngularJS执行上下文。只有在AngularJS执行上下文中应用的操作才会受益

我有一个指令，需要时不时地做一些事情，比如说它必须计算一些事情。如果我使用$scope的基本语法来绑定count函数，它就可以正常工作。但是当我们以语法形式切换到控制器时，它不会绑定函数。这是一个正在工作的plunker：

HTML


你好{{vm.name}

使用

$interval

服务

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

有关详细信息，请参阅

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

您在此修改的示例：

  //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);
        };
      }
    };
  })

或者您也可以在此处查看我的改良plunker：

谢谢，我只使用了setInterval作为示例。无论如何，将setInterval更改为$interval，我们得到了相同的结果：它工作得很好。像这样封装count（）函数是错误的做法吗？

  .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);
        };
      },
    };
   });

<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>

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);

  //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);
        };
      }
    };
  })