Call Angular nested functions

Question

I'm trying to call a nested function in Angular. I've formatted the functions in such a way in order to neaten up code, yet when invoking the function through an ng-click it doesnt seem to work.

In my case, a scope conflict occurs because the variable name is taken by the local scope, so I've named a controller and invoked it as a child property of the controller, but no success.

I've created a jsfiddle to demonstrate what I mean: https://jsfiddle.net/838L40hf/16/

HTML:

<div class="InviteAppContainer" ng-app="InviteApp">
    <div ng-controller="InviteController as cntrl">
      <button ng-click="alert()">
        Alert, standard
      </button>

      <div ng-repeat="invite in invites">
        <button ng-click="cntrl.invite.alert(invite.name)">
          Alert, {{invite.name}}
        </button>
      </div>
    </div>
</div>

JS:

var InviteApp = angular.module('InviteApp',[])
.controller('InviteController', function($scope) {
    $scope.invites = {
    0 : {
        "name":"invite 1",
        }, 
    1 :{
        "name" : "invite 2"
        }
  };

    $scope.invite = {
    alert : function(name) {
            alert(name);
    }
  };

    $scope.alert = function() {
        alert("alert2!");
    };
});

miqh · Accepted Answer · 2016-11-15 14:22:30Z

3

If you're using the controller as syntax, you should be binding things to this instead of $scope if you wish to access them through the aliased controller name.

Simply changing the binding from $scope.invite to this.invite will do the trick.

https://jsfiddle.net/pL4wc10n/

answered Nov 15, 2016 at 14:22

miqh

3,6642 gold badges31 silver badges38 bronze badges

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

Comments

gianlucatursi · Accepted Answer · 2016-11-15 14:26:39Z

1

You should use this

Javascript

var InviteApp = angular.module('InviteApp',[])
  .controller('InviteController', function($scope) {
    // controllerAs : cntrl
    var that = this;

    $scope.invites = {
     0 : {
      "name":"invite 1",
     }, 
     1 :{
      "name" : "invite 2"
     }
    };
    // USING THIS you have cntrl.function
    that.invite = {
     alert : function(name) {
      alert(name);
    }
  };

  $scope.alert = function() {
    alert("alert2!");
  };
});

answered Nov 15, 2016 at 14:26

gianlucatursi

6905 silver badges19 bronze badges

Comments

Tân · Accepted Answer · 2016-11-15 14:21:40Z

0

var InviteApp = angular.module('InviteApp',[])
.controller('InviteController', function($scope) {
	$scope.invites = {
  	0 : {
    	"name":"invite 1",
		}, 
    1 :{
    	"name" : "invite 2"
		}
  };

	$scope.invite = {
  	alert : function(name) {
			alert(name);
  	}
  };

	$scope.alert = function() {
		alert("alert2!");
	};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="InviteAppContainer" ng-app="InviteApp">
  	<div ng-controller="InviteController as cntrl">
      <button ng-click="alert()">
        Alert, standard
      </button>
      
      <div ng-repeat="i in invites">
        <button ng-click="invite.alert(i.name)">
          Alert, {{i.name}}
        </button>
      </div>
    </div>
</div>

What I edit:

<div ng-repeat="i in invites">
    <button ng-click="invite.alert(i.name)">
        Alert, {{i.name}}
    </button>
</div>

answered Nov 15, 2016 at 14:21

Tân

1

3 Comments

kirgy Over a year ago

thanks, that works as a work around, but I was wondering if there was a way to target the parent scope perhaps?

Tân Over a year ago

@kirgy I don't know why you want to do that, but it seems like shorter about syntax. I suggest to using object.function_name instead of controller.object.function_name

kirgy Over a year ago

Same reason as why you would want to use parent.variable in any JS function - scope conflict.

Collectives™ on Stack Overflow

Call Angular nested functions

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related