CODEWITHSUNDEEP
javascriptangularjs
kirgy
kirgy

Reputation: 1607

Call Angular nested functions

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!");
    };
});

Upvotes: 0

Views: 1733

Answers (3)

gianlucatursi
gianlucatursi

Reputation: 680

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!");
  };
});

Upvotes: 1

miqh
miqh

Reputation: 3664

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/

Upvotes: 3

T&#226;n
T&#226;n

Reputation: 1

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>

Upvotes: 0

Related Questions