Question

我正在将社交登录添加到我的网络应用中。现在我开始使用我们的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-include添加到父视图中）

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

AngularJS模型绑定并将模型值传递给Controller方法

1 个答案: