Question

我的范围有问题。我无法从控制器方法登录访问范围属性fullName。为什么呢？

App.controller('LoginController', ['$scope', 'LoginService', '$location', function(scope, LoginService, location) {
    scope.fullName = "Full name";

    scope.login = function(data, scope) {

        LoginService.login(data).then(function(data) {

            scope.fullName = LoginService.getFirstName() + " " + LoginService.getLastName();
        });
    };

    scope.logout = function(data) {
        LoginService.logout();
        location.path("/index.html#/login");

    };

}]);

Answer 1

也许是因为在login你收到了两个参数。第二个scope会覆盖传入控制器的那个。

Answer 2

我编辑了它，现在它可以工作了。 :) 我有另一个问题，fullName不会在这个html中呈现。

它总是打印我在第二行设置的fullName，而不是登录功能。

<li class="dropdown" ng-controller="LoginController">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i>{{fullName}}<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#"><i class="fa fa-fw fa-user"></i> Profile</a>
                            </li>
                            <li>
                                <a href="#"><i class="fa fa-fw fa-envelope"></i> Inbox</a>
                            </li>
                            <li>
                                <a href="#"><i class="fa fa-fw fa-gear"></i> Settings</a>
                            </li>
                            <li class="divider"></li>
                            <li >
                                <a href="" ng-click="logout()"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
                            </li>
                        </ul>
                    </li>

Answer 3

查看这个（一般方法）如何向服务发送数据和从服务返回数据的工作示例 - jsfiddle：https://jsfiddle.net/z5vd676x/和下面代码的副本。您可以对其进行调整以使其更有效地应用于您的应用程序并遵循最佳实践（即承诺，错误处理，缩小等）：

var app = angular.module('myApp', []);

app.controller('LoginController', function($scope, LoginService) {
    $scope.fullName = "Full name";

    $scope.login = function(data) {
        $scope.data =data;  //store as $scope.data and pass it to the service :
        $scope.fullName = LoginService.getFirstName($scope.data) + " " + LoginService.getLastName($scope.data);  

    };

});

//this is an example of a .service, you did not provide your code for this
app.service('LoginService', function() {   
    this.getFirstName = function (data) {
        if (data === '123') 
            return 'John';
        else 
            return 'Mike';
    };

    this.getLastName = function (data) {
        if (data === '123')
            return 'Winkle';
        else
            return 'Santos';
            };
});

index.html（使用示例）

    <div ng-app="myApp" ng-controller="LoginController">
        <input type="text" ng-model="findName">  <!--bind the search text-->
        <button type="button" ng-click="login(findName)">Search</button>

<!--show the initial value below and update it when the LoginService returns your data -->
                <h3>Name: {{fullName}}</h3>  

    </div>

无法从控制器功能访问范围

3 个答案: