Как вызвать функцию контроллера внутри функции директивной ссылки, используя '&' с параметром?

Я пытаюсь передать параметр в функцию внутри функции директивной ссылки, похожую на этот вопрос: Angular: вызов функции контроллера внутри функции директивной ссылки с помощью &;;

Однако, хотя я видел несколько примеров, таких как этот: передача параметров из директивы в функцию, и я видел, как значение параметра устанавливается внутри ссылки внутри директивы. Тем не менее, я не видел ни одного, где вы передаете примитив, например число в качестве параметра в директиву, которая передает это в функцию контроллера.

Я пробовал несколько вещей, но не понял синтаксис.

HTML-код:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.2" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div id="app" ng-app="app">
    <div ng-controller="mainCtrl">
          <my-directive ctrl-fn="ctrlFn(count)"></my-directive> 
        </div>
      </div>
  </body>

</html>

script.js

var app = angular.module('app', []);

app.controller("mainCtrl", function($scope) {
  $scope.count = 0;
  $scope.ctrlFn = function() {
      $scope.count = 0;
      console.log('In mainCtrl ctrlFn!');
      $scope.count += count;
     // console.log("count is: " + JSON.stringify($scope.count));
    //Call service here
  };  
})


.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      'count' : '&',
      'ctrlFn' : '&'
    },
    template: "<div><button ng-click='ctrlFn({count: 10})'>Click Here</button></div>",
    link: function(scope, element, attributes) {
      var count = null;
      scope.ctrlFn = scope.ctrlFn({count: count});
      //scope.text = scope.fn({ count: 0 });
    }
  };
});

Мой плункер здесь: http://plnkr.co/edit/6uDntNeqe0g343PmeCED?p=preview

Может ли примитив быть передан в качестве параметра в этом случае использования? Если так, то что мне здесь не хватает?

Последствие:

Если кто-то ищет этот синтаксис: ctrlFn({count: 10}) в документации angularjs это упоминается здесь под пользовательскими директивами:

Часто желательно передавать данные из области изолята через выражение в родительскую область, это можно сделать, передав карту имен и значений локальных переменных в функцию-оболочку выражения. Например, функция hideDialog принимает сообщение для отображения, когда диалог скрыт. Это указывается в директиве путем вызова close({сообщение: 'закрытие на данный момент'}). Тогда сообщение локальной переменной будет доступно в выражении on-close.

Источник

1 ответ

Решение

Вы сделали две ошибки:

  • scope.ctrlFn = scope.ctrlFn({count: count}); - эта строка переопределяет переданную ссылку на функцию и устанавливает значение, возвращаемое этой функцией (undefined в этом случае)

  • пройти count значение вашего директива вы должны использовать = вместо &

Ниже приведен код упрощенного примера.

script.js:

var app = angular.module('app', []);

app.controller("mainCtrl", function($scope) {
  $scope.count = 0;
  $scope.ctrlFn = function(count) {
      console.log(count)
      console.log('In mainCtrl ctrlFn!', count);
      $scope.count += count;
    //Call service here
  };  
})


.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      'count' : '=',
      'ctrlFn' : '&'
    },
    template: "<div><button ng-click='ctrlFn({ count: 100 })'>Click Here</button></div>"
  };
})

index.html:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.2" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div id="app" ng-app="app">
    <div ng-controller="mainCtrl"> {{count}}
          <my-directive ctrl-fn="ctrlFn(count)"></my-directive> 
        </div>
      </div>
  </body>

</html>
Источник
Другие вопросы по тегам