javascript - AngularJS:数据绑定(bind)到数组元素不适用于批量更新

Question

期望的行为是我想根据后端返回的数据动态生成一些导航条目(一些 <a> s )。所以我绑定(bind)了 Herf 和每个 <a> 的文本数组元素的字段 model 。一旦后端调用返回，我分配返回数据 data至model更新 html。 model和data共享相同的结构，但这对我不起作用。

数组看起来像

     $scope.links = {
                    'cancelLink': 'http://cancelLink',
                    'Steps': [{
                      'label': "Step1",
                      'link': "http://1"
                    }, {
                      'label': "Step2",
                      'link': "http://2"
                    }, {
                      'label': "Step3",
                      'link': "http://3",
                      'active': true
                    }, {
                      'label': "Review",
                      'link': "http://review"
                    }]
                  };

更新逻辑

$scope.loadLinks = function () {
                    $http({
                      method: 'GET',
                      url: '/links'
                    }).success(function(data) {
                        $scope.links = data;
                    });
                  };

HTML

<li><a class="text clickable" ng-href={{links.Steps[0].link}}>{{links.Steps[0].label}}</a></li>
<li><a class="text clickable" ng-href={{links.Steps[1].link}}>{{links.Steps[1].label}}</a></li>
...

上面的代码只是默默地失败了，控制台没有任何输出。我尝试从 date 按字段分配至link ( links.Steps[0].link == data.Steps[0].link )并且有效。所以我想知道是不支持这种批量更新还是什么？另外我想知道我应该如何解决这种 ng-directive 问题？

Answer 1

我将你的代码放入 http://plnkr.co/edit/c5AOjyuLhBGqqugT4VU4?p=preview 的 Plnkr 中.

一个小的风格变化(尽管它不会以任何方式破坏)，您应该将 ng-href 值括在引号中:

ng-href={{links.Steps[0].link}}

应该是

ng-href="{{links.Steps[0].link}}"

否则，正如您在 Plnkr 中看到的那样，它工作得很好。我猜你的问题是 $http 调用没有像你期望的那样加载 JSON，你的 HTML 无法访问 Controller 中的 $scope，或者在加载函数中设置的 $scope 不一样您正在访问的范围。

如果您发布一组更完整的代码，我们可以看到它的问题所在。