AngularJs 将 http 响应对象分配给来自 html 的范围

Question

这是我第一次使用 AngularJs，非常感谢您的帮助。

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

我需要从 html.

向范围分配一个 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>

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

我在 div 上使用 ng-init 是否正确，还是我应该使用不同的方法？有没有其他方法可以实现我的需要？

Answer 1

如果您使用 ng-init，那么它会创建一个范围变量，该范围变量仅限于您定义它的元素（及其子元素）。换句话说，它在您的控制器中不可用，这就是您获得 'undefined'.

的原因

为了解决这个问题，您可以使用 $parent，这将在您的控制器中创建范围变量：

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

Answer 2

我的理解是 ng-init 不能用于在解决承诺后设置范围值，这是从 $http.get 设置值时发生的情况。请参阅 angular 文档了解 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);
        });
}]);

AngularJs 将 http 响应对象分配给来自 html 的范围

AngularJs assign http response object to scope from html

html

json

angularjs

http

angularjs-ng-init