AngularJS directive - initial invoke function

Question

I use this directive:

function communicationCreateFormDirective($timeout) {
    var directive = {
        restrict: 'E',
        scope: {
            selectedCommunicationGroups: '=',
            currentUser: '='
        },
        templateUrl: 'app/communication/....html',
        link: function($scope) {
            ...
            connect();

and I will initially invoke the function connect() but I get the error:

angular.js:14110 ReferenceError: connect is not defined

Also $scope.connect() does not work. Does anyone know how to do?

Thats the function:

$scope.connect = function() {
                var socket = new SockJS('/api/chat');
                $scope.stompClient = Stomp.over(socket);            
                $scope.stompClient.connect({}, function(frame) {
                    console.log('webSocket Connected in communicationCreateForm.directive.js: ' + frame);
                    $scope.stompClient.subscribe('/topic/communication/' + $scope.currentUser.id, function(message) {
                        //vm.showMessage(JSON.parse(message.body));
                        alert('Message response QUMA: ' + JSON.parse(message.body));
                    });
                });
            }

Well... That's usually what happen when you're calling an undefined function — Alon Eitan
– Alon Eitan, Commented Dec 28, 2016 at 21:36
Does the $scope.connect function defined outside of the directive scope (In another controller?) Then you should bind it to the directive by changing its scope: { ... } object, and add: connect: '&'. Then you should be able to invoke the function from the directive using $scope.connect() (But don't forget to bind it to the directive in the view using a connect="connect()" attribute!) — Alon Eitan
– Alon Eitan, Commented Dec 28, 2016 at 21:47

TheSharpieOne · Accepted Answer · 2016-12-28 21:51:11Z

1

Your directive is creating a new isolated scope which does not have direct access to the scope of the controller in which you defined connect. You need to pass in the function similar to how you are passing in selectedCommunicationGroups and currentUser for it to be in your link function's scope.

function communicationCreateFormDirective($timeout) {
  var directive = {
    restrict: 'E',
    scope: {
      selectedCommunicationGroups: '=',
      currentUser: '=',
      connect: '=' // <- "links" the scopes together
    },
    templateUrl: 'app/communication/....html',
    link: function($scope) {
      ...
      $scope.connect();

HTML: <wheverYouCalledIt connect="connect" ... >

You can also use '&' instead of '=' for connect, this would allow to you pass more thing along when calling the function, but doesn't look like you need that. If you did this, the HTML attribute would change slightly to be connect="connect()"

edited Dec 28, 2016 at 21:51

answered Dec 28, 2016 at 21:49

TheSharpieOne

25.7k9 gold badges71 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alon Eitan Over a year ago

No, AFAIK you bind functions to a directive using '&' and not '='

TheSharpieOne Over a year ago

@AlonEitan I added a note. '&' is meant to allow you to pass more thing in the call (such as local parameters). It's how $event gets there on your ngClicks and such. Either way works in this case.

TheSharpieOne Over a year ago

Then you need to define it before you try to use it.

Collectives™ on Stack Overflow

AngularJS directive - initial invoke function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related