1

这是我第一次使用 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>

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

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

4

2 回答 2

2

我的理解是，ng-init在 promise 解决后不能用于设置范围值，这是从$http.get. 请参阅 ngInit 的角度文档https://docs.angularjs.org/api/ng/directive/ngInit

在您的问题中，您说您需要productId在 html 中设置值，但是这似乎是不可能的，因为它是由承诺返回的。

只需使用以下命令，即可在控制器中轻松实现替代方案：

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);
        });
}]);
于 2015-11-14T20:41:50.243 回答
1

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

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

ng-init="$parent.productId = page[0].acf.spotlight_on"
于 2015-11-14T17:54:55.950 回答