Question

我在Angular中遇到了一些范围问题。

我的代码是：

angular.module('main', [])
.controller('controller-div', function($scope) {

    var pathArray = window.location.pathname.split('/');
    var levelLocation = pathArray[2];
    console.log("location: " + levelLocation);

    $.get("/api/summoner/" + levelLocation, 
        function(data) {
            var newData = JSON.parse(data);
            console.log(newData);
            $scope.summoner = "Text to test scope";
            console.log($scope.summoner);
        });
    }
);

我的前端使用{{summoner}}来显示数据。

Ajax调用和所有控制台日志都可以正常工作，但页面上没有数据显示。如果我在$scope.summoner调用之外设置$.get，“测试范围的文本”看起来非常正常，但我无法访问数据，因为我超出了Get调用的范围（？）。

我尝试将回调数据设置为预先实例化的变量，之后使用它仍然无法正常工作。我也尝试过：

$.get("/api/summoner/" + levelLocation, 
    (function (s) {
        return function(data) {
            var newData = JSON.parse(data);
            console.log(newData);
            s.summoner = "hjkhdkjhe";
            console.log(s.summoner);
        }
    })($scope));

但无济于事。

任何帮助将不胜感激！

编辑：问题已经解决，但为了将来参考，这是我的HTML。

<body ng-app="main">
    <div ng-controller="controller-div">
        <h1>Hello University World!</h1>
            The ID is {{summoner}}
    </div>
</body>

Answer 1

如果你正在对后端进行异步调用，那么你应该使用AngularJS的$http service和promise api。

您正在使用jQuery的$ .get来调用后端，因此AngularJS不知道调用何时完成，因此可以使用新值更新范围。

Answer 2

使用此：

$http.get("/api/summoner/" + levelLocation).success(function(data) {
            var newData = data; // data doesn't need parse
            $scope.summoner = "Text to test scope";
        });

别忘了：

在控制器中加入 $ http

Answer 3

你必须在响应来之后调用$ scope。$ apply（）。例如：

var pathArray = window.location.pathname.split('/');
var levelLocation = pathArray[2];
console.log("location: " + levelLocation);

$.get("/api/summoner/" + levelLocation, 
    function(data) {
        var newData = JSON.parse(data);
        console.log(newData);
        $scope.summoner = "Text to test scope";
        console.log($scope.summoner);
        $scope.$apply(); 
    });
}

）;

Answer 4

glcheetham是正确的，但它并没有完全回答这个问题。 $ .Get中的$ scope与{{summoner}}所在的$ scope不同。这就是为什么你可以在$ .Get块之外设置它，但不在里面。这令人困惑，因为您使用相同的名称（$ scope）来引用两个不同的东西。

您正在体验＆＃34; Scope Soup＆＃34;我从约什卡罗尔那里读到的here。

文章中的每个项目＃3，以下是我将如何编写它。请注意，没有引用$ scope。

angular.module('main', []);
.controller('controller-div', function() {
_this = this; //_this will be available everywhere, even inside your promise block.
var pathArray = window.location.pathname.split('/');
var levelLocation = pathArray[2];
console.log("location: " + levelLocation);

$.http.post("/api/summoner/" + levelLocation).then(
//SUCCESS Callback        
function(data){
        var newData = JSON.parse(data);
        console.log(data);
        //scope inside promise block
        this.summoner = "Text to test scope";
        console.log(this.summoner);
        //scope where you want to change displayed data
        _this.summoner = newData;
        console.log(_this.summoner);
    });
}
);

现在在你的html中，使用＆＃34; controller-as＆＃34;语法并用ctrl预先挂起召唤师。

<body ng-app="main">
    <div ng-controller="controller-div as ctrl">
    <h1>Hello University World!</h1>
        The ID is {{ctrl.summoner}}
    </div>
</body>

角度Js中的范围问题

4 个答案: