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?

Answer 1

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

被解释为JavaScript，所以您真正想要的是

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