AngularJS: Передача функции с директивой

Question

У меня проблема, передавая функцию директивы (знакомый на этот пост: AngularJS - pass function to directive, но я не могу заставить его работать)

Вот мой код:

Директива :

.directive('testdirective', function(){ 
    return{ 
    restrict: 'E', 
    scope: { 
     onClick: '&' 
    }, 
    controller: 'TestController', 
    controllerAs: 'tc', 
    bindToController: true, 
    template: '<div><button ng-click="onClick()">What UP</button></div>', 
    replace: true 
    } 
}) 

контроллер:

TestController.$inject = ["$scope"]; 
    function TestController($scope) { 
    $scope.testFunction = function(){ 
     alert("I´m the alert of the TestContoller"); 
    }; 
    $scope.test = 'test'; 
    } 

HTML:

<div> 
    <testdirective on-click="testFunction()"></testdirective> 
</div> 

Что я хочу, звучит очень просто, я просто хочу передать функцию директиве и выполнить ее с помощью кнопки ng-click.

Для меня мой код выглядит точно like this fiddle но шахта не работает:/

Было бы удивительным, если кто-то получил какие-то намеки на меня.

EDIT

Моя директива нужна его собственный контроллер!

Позже функция, которая будет передана, будет поступать с другого контроллера !!!

Answer 1

Скрипка - это не то же самое, что ваш код.

Вы установили контроллер своей директивы как «TestController». Я предполагаю, что вы хотели бы сделать, это:

.directive('testdirective', function(){ 
    return{ 
     restrict: 'E', 
     scope: { 
      onClick: '&' 
     }, 
     template: '<div><button ng-click="onClick()">What UP</button></div>', 
     replace: true 
    } 
}); 

и в вашем HTML,

<div ng-controller="TestController"> 
    <testdirective on-click="testFunction()"></testdirective> 
</div> 

EDIT: На основе комментарий OP в

app.directive('testdirective', function(){ 
     return{ 
      restrict: 'E', 
      scope: { 
       onClick: '&' 
      }, 
      template: '<div><button ng-click="tc.onClick()">What UP</button></div>', 
      replace: true, 
      controller: 'TestController', 
      controllerAs: 'tc', 
      bindToController: true 
     } 
    }); 

    app.controller('TestController', function ($scope) { 
     console.log($scope); 
    }) ; 

    app.controller('AnotherController', function ($scope) { 
     $scope.testFunction = function(){ 
      alert("I´m the alert of the TestContoller"); 
     }; 

     $scope.test = 'test'; 
    }); 

И, ваш HTML

<div ng-controller="AnotherController"> 
    <testdirective on-click="testFunction()"></testdirective> 
</div> 

Вы указываете директиву bindToControlle р. Поэтому в шаблоне директивы onClick привязан к контроллеру, а не к области. Таким образом, вы получаете доступ к onclick через контроллер как tc.onClick() в шаблоне директивы.

Answer 2

Вы можете передать метод в качестве ссылки:

1.Pass функции в качестве эталона и не призыв:

<div> 
    <testdirective on-click="testFunction"></testdirective> 
</div> 

2.Update директива:

.directive('testdirective', function(){ 
    return{ 
     restrict: 'E', 
     scope: { 
      onClick: '=' 
     }, 
     template: '<div><button ng-click="onClick()">What UP</button></div>', 
     replace: true 
    } 
}); 

JSFIDDLE.

Answer 3

Ну, в вашем testdirective, вы определили контроллер TestController. testFunction(), который вы пытаетесь вызвать через onClick параметр области действия определяется в контроллере TestController, который является директивным контроллером. Таким образом, вместо того, чтобы вызывать через onClick вы можете позвонить прямо как

template: '<div><button ng-click="testFunction()">What UP</button></div>'. 

его очень запутанным, вы определения контроллера в директиве и снова обращаясь это одна функция с помощью параметра области действия этой директивы, которая выглядеть рекурсивной.

Если вы хотите вызвать через параметр области действия, то вы должны сделать изменения ниже.

, например. JS:

<div ng-controller="TestController" ng-app="dr"> 
    <testdirective on-click="testFunction()"></testdirective> 
</div> 

app.directive('testdirective', function() { 
    return{ 
    restrict: 'E', 
    scope: { 
     onClick: '&' 
    }, 
    template: '<div><button ng-click="onClick()">What UP</button></div>', 
    replace: true 
    } 
}); 

Answer 4

Directivie:

.directive('testdirective', function(){ 
return{ 
restrict: 'E', 
scope: { 
    onClick: '=onClick' 
}, 
controller: 'TestController', 
controllerAs: 'tc', 
bindToController: true, 
template: '<div><button ng-click="onClick()">What UP</button></div>', 
replace: true 
} 
}) 

использование '=' вместо '&', так что вы можете получить функцию HTML в вашей директиве. и вы можете просто передать onClick параметр через HTML HTML:

<div> 
<testdirective on-click="testFunction()"></testdirective> 
</div>