AngularJS Model Binding and passing model value to a Controller Method

Question

I am adding Social Logins to my web app. Now I do a get on our webapi to get the available logins and then use an ng-repeat to list the buttons.

I have the following service;

var _getExternalProviders = function () {

    var returnUrl = "#";
    var externalProviderUrl = ngAuthSettings.apiServiceBaseUri + "api/Account/ExternalLogins?returnurl=" + returnUrl
                                                                + "&generateState=true";

    return $http.get(externalProviderUrl).then(function (results) {
        return results;
    });
};

i then call this service from my controller;

   authService.getExternalProviders().then(function (results) {
           $scope.externalProviders = results.data;  
        },
    function (err) {
        $scope.message = err.error_description;
    });

and my view is as follows;

<div data-ng-controller="loginController">
    <div data-ng-repeat="provider in externalProviders">
        <button class="btn btn-large btn-{{provider.name.toLowerCase() == 'microsoft' ? 'windows' : provider.name.toLowerCase()}} btn-block" type="button" data-ng-click="authExternalProvider('{{provider.name}}')"><i class="fa fa-{{provider.name.toLowerCase() == 'microsoft' ? 'windows' : provider.name.toLowerCase()}}"></i> | Connect with {{provider.name}}</button>
    </div>
</div>

(which is added to the parent view using an ng-include)

    <div ng-include="'app/views/externalProviders.html'">
    </div>

Now this is working and the buttons are returning and rendering great, and when I inspect the html

data-ng-click="authExternalProvider('{{provider.name}}')"

is rendering as

data-ng-click="authExternalProvider('Google')"

for example, however when i click the element the function is being passed '{{provider.name}}' as a string instead.

The cothroller method for the ng-click is as follows;

$scope.authExternalProvider = function (provider) {

    console.log(provider);

    var redirectUri = location.protocol + '//' + location.host + '/authcomplete.html';

    var externalProviderUrl = ngAuthSettings.apiServiceBaseUri + "api/Account/ExternalLogin?provider=" + provider
                                                                + "&response_type=token&client_id=" + ngAuthSettings.clientId
                                                                + "&redirect_uri=" + redirectUri;
    window.$windowScope = $scope;

    var oauthWindow = window.open(externalProviderUrl, "Authenticate Account", "location=0,status=0,width=600,height=750");
};

Can anyone tell me what I am doing wrong please?

what data type u required to be passed as? , if its not a string . I think it should be string — Shushanth Pallegar
– Shushanth Pallegar, Commented Feb 1, 2016 at 11:04
Yes just a string to be passed. Then I'm just passing that string across to the api. — Matthew Flynn
– Matthew Flynn, Commented Feb 1, 2016 at 11:10

Dave Bush · Accepted Answer · 2016-02-01 12:18:05Z

1

data-ng-click="authExternalProvider('{{provider.name}}')"

gets interpreted as JavaScript so what you really want is

data-ng-click="authExternalProvider(provider.name)"

answered Feb 1, 2016 at 12:18

Dave Bush

2,38217 silver badges12 bronze badges

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

1 Comment

Matthew Flynn Over a year ago

thanks for that. I assumed that angular still parsed in the variables names so the {{ }} was required.

Collectives™ on Stack Overflow

AngularJS Model Binding and passing model value to a Controller Method

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related