2017-02-10 9 views
0

Я пытаюсь передать параметр в функцию, внутри функции директивы связи, похоже на этот вопрос: Angular: calling controller function inside a directive link function using &Как вызвать функцию контроллера внутри функции директивной ссылки с помощью '&' с параметром?

Однако, в то время как я видел несколько примеров, как этот: Passing Parameters from a Directive to a function и I «Видно, что значение параметра устанавливается внутри ссылки внутри директивы. Тем не менее, я не видел никого, где вы передаете примитив, например число в качестве параметра директивы, которая передает это в функцию контроллера.

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

HTML КОД:

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]" 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 }); 
    } 
    }; 
}); 

Мой plunker здесь: http://plnkr.co/edit/6uDntNeqe0g343PmeCED?p=preview

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

Aftermath:

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

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

ответ

2

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

  • 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="[email protected]" 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> 
+2

Ну я получил одно право, я задал вопрос на SO.Спасибо вам за помощь! –

+0

Я рад, что помогу вам. –

+0

Я только что прошел через это, так что есть способ сохранить счетчик вне кода директивы и просто передать значение, например, 100 из ng-click на контроллер без необходимости вставить его в функцию ссылок директив? Я пытаюсь сделать это компонентом и инкапсулировать функциональность, но я не хочу, чтобы директива ничего не знала о самом значении, просто передайте его. Я хочу, чтобы значение было установлено за пределами директивы. –