Question

这是我第一次使用AngularJs，我真的很感激一些帮助。

我有一个json文件，我从中检索一些显示在我的html模板上的内容。到目前为止一切都很好。

我需要从html中为http范围分配一个http响应数据。

这是我的应用

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

myApp.controller('mainController', ['$scope', '$filter', '$http', '$log', function($scope, $filter, $http, $log) {

$scope.url = "myurl";

$http.get($scope.url)
    .success(function(result) {

        $scope.page = result;

    })
    .error(function(data, status) {

        $log.info(data);

    });

$scope.$watch('productId', function () {
    $log.info($scope.productId);
});

}]);

这是html

<div class="page" ng-controller="mainController">

    <div id="content" class="chapter">

        <h1>The Icons Update</h1>

        <div ng-init="productId = page[0].acf.spotlight_on"></div>

        <p>{{ page[0].acf.spotlight_on_title }}</p>
        <p>{{ page[0].acf.spotlight_on_paragraph }}</p>
        <img src="{{ page[0].acf.stylist_picture }}" />

    </div>
</div>

我需要将productId的值分配给page[0].acf.spotlight_on，但需要从html中执行此操作。我只是得到一个未定义的值。

我是否可以在div上使用ng-init或者我应该使用不同的方法？是否有不同的方法来实现我的需求？

Answer 1

我的理解是，ng-init不能用于在解析promise之后设置范围值，这是从$http.get设置值时发生的情况。请参阅ngInit https://docs.angularjs.org/api/ng/directive/ngInit

的角度文档

在你的问题中，你说你需要在html中设置productId的值，但是在承诺返回的地方似乎不可能。

只需使用以下内容，控制器中的替代方法非常简单：

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

myApp.controller('mainController', 
    ['$scope', '$filter', '$http', '$log', 
    function($scope, $filter, $http, $log) {

    $scope.page = {};
    $scope.productId = '';

    $scope.url = "myurl";
    $http.get($scope.url)
        .success(function(result) {
            $scope.page = result;
            // set the value of productId from the result
            $scope.productId = result[0].acf.spotlight_on;
        })
        .error(function(data, status) {
            $log.info(data);
        });
}]);

Answer 2

如果使用ng-init，则会创建一个范围变量，该范围变量仅限于已定义它的元素（及其子元素）。换句话说，它在您的控制器中不可用，这就是您“未定义”的原因。

要解决此问题，您可以使用$parent，它将在您的控制器中创建范围变量：

ng-init="$parent.productId = page[0].acf.spotlight_on"

AngularJs将http响应对象从html

2 个答案: