AngularJS模型綁定並將模型值傳遞給控制器​​方法

Question

我將Social Logins添加到我的Web應用程序。現在我在webapi上獲取可用的登錄名，然後使用ng-repeat列出按鈕。

我有以下服務;

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

然後我從我的控制器調用此服務;

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

我的看法如下;

<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> 

（其是使用添加到父視圖NG-包括）

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

現在這是工作並且按鈕返回和呈現很大，並且當我檢查HTML

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

被渲染爲

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

例如，

但是，當我單擊該元素時，該函數正在作爲字符串傳遞「{{provider.name}}」。

ng-click的cothroller方法如下;

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

有誰能告訴我我做錯了嗎？

Answer 1

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

被解釋爲JavaScript的，所以你真正想要的是

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