Вызов функции контроллера из директивы с параметрами

Как директива может вызвать функцию из контроллера с некоторыми параметрами?

Я хотел бы передать переменную myVar в область. $apply (attrs.whattodo);

HTML:

<div ng-app="component">
  <div ng-controller="ctrl">
    <span ng-repeat="i in myarray">
     <span  customattr  whattodo="addVal">{{i}}</span>
    </span>
  </div>

Контроллер JS:

   function ctrl($scope) {
      $scope.myarray = [1];
      $scope.addVal = function (value) {
          $scope.myarray.push(value);
      }
   }

Директива JS:

angular.module('component', []).directive('customattr', function () {
  return {
      restrict: 'A',
      link: function (scope, element, attrs) {
          var myVar = 5;
          scope.$apply(attrs.whattodo);
      } 
  }; 
});

Ответы

Ответ 1

Вот один из методов работы:

Вы должны привязать этот атрибут в области видимости как модель области с типом функции. Таким образом, вы можете выполнить это, когда вам нужно в другой (директивной) sope

HTML

<body ng-controller="MainCtrl">
  Value: {{value}}!

  <button customattr whattodo="addValue">Add</button>
</body>

JS

angular.module('component', [])

.controller('MainCtrl', function($scope) {
  $scope.value = 1;

  $scope.addValue = function(val){
    alert(val);
    $scope.value = val;
  }
});

.directive('customattr', function () {
  return {
      restrict: 'A',
      scope: {
          whattodo: "=" // or ' someOtherScopeName: "=whattodo" '
      },
      link: function (scope, element, attrs) {
          var myVar = 5;
          scope.whattodo(myVar); // or ' scope.someOtherScopeName(myVar) '
      } 
  }; 
});

Вот код на plunker

от AngularJS: Директивы

= or = attr - устанавливает двунаправленную привязку между локальным свойством scope и свойством родительской области имени, определяемым через значение атрибута attr. Если имя attr не указано, атрибут Предполагается, что имя совпадает с именем локального. Определенное и видимое определение области: { localModel: '= myAttr'}, то свойство scope widget localModel будет отражают значение parentModel в родительской области. Любые изменения в parentModel будет отображаться в localModel и любые изменения в localModel будет отображаться в parentModel

Ответ 2

в html

whattodo="addVal(value)"

в директиве

scope.$apply(function(s){
    s.whattodo({value : myVar});
});

Ответ 3

Почему бы вам не использовать "&" знак в изолированной области?

<body ng-controller="MainCtrl">
  Value: {{value}}!
  <button customattr add-val="addValue(value)">Add</button>
</body>

В контроллере:

   function ctrl($scope) {
      $scope.myarray = [1];
      $scope.addValue = function (value) {
          $scope.myarray.push(value);
      }
   }

И в директиве:

angular.module('component', []).directive('customattr', function () {
  return {
      restrict: 'A',
      scope: {
          addVal: "&"
      },
      controller: function ($scope) {
          var myVar = 5;
             // To execute addVal in controller with 'value' param
          $scope.addVal({value: value}) 
      } 
  }; 
});