Question

我一直在使用一些角度控制器来获取/发布请求几次，因此对角度没有太多经验（或以任何方式使用JS，我的后端类型不是前端），但我遇到了问题一直试图解决私人项目的过去一周，但没有成功。我试过我能找到的任何解决方案。希望有人可以提供帮助。

我从后端获得包含4x字符串的1x JSON对象和一个字符串列表。

{
  'var1':'abc',
  'var2':'def',
  'var3':'ghi',
  'var4':'jkl',
  'images':['images/abcd.jpg', 'images/efgh.jpg']
}

gui更新所有4个字符串，但不更新列表。

控制器：

app.controller('ObjectInfoController', function ($scope, $window, $http) {

        $scope.$watch('images', function(newValue, oldValue) {
            alert(newValue);
        });

        $http.post("http://localhost:8080/view_object/", postdata).then(
            function(data, status, headers, config) {
            $scope.var1 = data.data.var1;
            $scope.var2 = data.data.var2;
            $scope.var3 = data.data.var3;
            $scope.var4 = data.data.var4;
            $scope.images = data.data.images;
            $scope.$digest();
        },
        function(err) {
            // Do something
        }
    );
});

HTML：

<div class="row" ng-controller="ObjectInfoController">
    <div class="col-md-3">
        <!-- Images -->
        <div class="owl-carousel content-slider-with-controls-autoplay">
            <div class="overlay-container overlay-visible" ng-repeat="image in images">
                <img src="{{image}}" alt="">
                <div class="overlay-bottom hidden-xs">

                </div>
                <a href="{{image}}" class="popup-img overlay-link"><i class="icon-plus-1"></i></a>
            </div>
        </div>
        <!-- Images end -->
    </div>
    <div class="col-md-8 pv-30 TextBlock bottomFix">
        <h2 class="TextBlockTitle">{{var1}}</h2>
        <ul class="nav">
            <li class="icon-right-open-outline"><strong>{{var2}}</strong></li>
            <li class="icon-right-open-outline"><strong>{{var3}}</strong></li>
            <li class="icon-right-open-outline"><strong>{{var4}}</strong></li>
    </ul>
  </div>
</div>

我看到人们使用手表来解决这个问题（虽然我不明白为什么列表需要它而不是剩余的数据），但是无法让它工作。

看到我在手表里面做的警报（）？通过该警报，我可以在ng-repeat中获得图像并且看起来都很好。删除警报，它不起作用。警报是否会进行某种更新＆＃34;更新＆＃34;对于视图，我可以强制它而不发出警报吗？

我实际上会弹出2个警告，第一个是空的，第二个打印我的列表，但这是正常的我发现了。我也尝试在手表内设置$ scope.images，但没有运气。

我觉得有什么微不足道的事我不明白，或者我不应该使用手表而是其他东西？如果你知道我做错了什么，请告诉我。我现在感到无能为力。

谢谢你的时间。

编辑：只是进行了一次随机测试并在{{var1}}之后键入了{{images [0]}}并且在页面上写出了正确的值....所以问题似乎只存在于我的ng中-repeat。

Answer 1

我没有看到你需要$ watch的原因。除非您有特定的理由，否则您也不应该拨打$ digest。

使用controllerAs-syntax是一个好主意，因为它使范围变得明显。将html中的控制器声明更改为<div class="row" ng-controller="ObjectInfoController as vm">，并通过模板中的vm引用您的变量，例如： ng-repeat="image in vm.images"。

app.controller('ObjectInfoController', function ($http) {
    var vm = this;

    $http.post("http://localhost:8080/view_object/", postdata).then(
        function(data, status, headers, config) {
            vm.var1 = data.data.var1;
            vm.var2 = data.data.var2;
            vm.var3 = data.data.var3;
            vm.var4 = data.data.var4;
            vm.images = data.data.images;
        },
        function(err) {
            // Do something
        }
    );
});

JSFiddle

当你在img-element源中使用变量时，you should use ng-src instead of src。

如果它仍然不起作用，我怀疑问题与owl-carousel有关 - 尝试在owl-carousel之外循环图像变量。

Answer 2

如果图像数组中的两个值相等，则将ng-repeat表达式更改为

ng-repeat="image in images track by $index"

ng-repeat with primitives需要一些小心。我刚刚在评论中提出了这个建议，但我没有代表。

请参阅this和this

Answer 3

因为您使用的是原始数据类型而不是提供双向数据绑定的对象。

原始数据类型不提供双向数据绑定。

vm.var1, vm.var2等是原始数据类型。

您应该按如下方式更改脚本和html。

JS：

$http.post("http://localhost:8080/view_object/", postdata).then(
            function(data, status, headers, config) {
            $scope.objData = data.data;
        },
        function(err) {
            // Do something
        }

HTML：

<ul class="nav">
    <li class="icon-right-open-outline"><strong>{{objData.var2}}</strong></li>
    <li class="icon-right-open-outline"><strong>{{objData.var3}}</strong></li>
    <li class="icon-right-open-outline"><strong>{{objData.var4}}</strong></li>
</ul>

Answer 4

实际上，所有答案都有效。甚至我原来的代码都工作了（这是我用过的另一个页面修改过的复制/粘贴。我发现在新的div中执行相同的ng-repeat代码然后才能工作，只是打印{{image}}并没有问题。

我过去几天认为理所当然的问题都在我的控制器中，实际上是一个CSS问题......

我很抱歉浪费时间，但感谢您更多地了解您发布的不同代码的用途：）

角度列表未在手表上更新

4 个答案: