Question

我一直在与Angular一起努力了解范围而不是。

插入新的电线＆＃39;到我的阵列，ng-repeat没有更新。我一直在阅读，这可能是因为当我添加它时，我的数组超出了范围（建议我可以添加到其他数组），但似乎并非如此？

这是我的代码

<body ng-app="wireApp" ng-controller="AddWireController">
<header>
 <form role="form" class="form">
     <div class="form-group">
        <input type="text" placeholder="Description" class="form-control" name="wireDescription" ng-model="wire.description">
        <input type="text" placeholder="URL" class="form-control" name="wireURL" ng-model="wire.URL">
        <input type="text" placeholder="Tags" class="form-control" name="wireTags" ng-model="wire.tags">
        <input type="text" placeholder="Groups" class="form-control" name="wireGroups" ng-model="wire.groups">
     </div>
     <button class="btn btn-primary btn-block" ng-click="addwire(wire)">Add+</button>
    </form>
</header>
<div id="timeline" ng-controller="ListWireController">
    <div ng-repeat="wire in wires">
         <div class="timeline-entry">
            <div class="timeline-stat">
            <div class="timeline-icon bg-info"><i class="fa fa-envelope fa-lg"></i></div>
            <div class="timeline-time">{{ wire.linLastTouched }}</div>
         </div>
            <div class="timeline-label">
            <h4 class="text-info text-lg">{{ wire.linDescription }}</h4>
            <p>{{ wire.tags }}</p>
         </div>
        </div>
    </div>
</div>
</body>

这是javascript（angular）：

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

//Parent controller
wireApp.controller('AddWireController', ['$scope', function($scope) {

$scope.addwire = function(wire) {
    $.post('/wire/create', wire, function(data) {
        $scope.$broadcast('addwire', data); //emit to children
    });
};

}]);

//Child of AddWireController
wireApp.controller('ListWireController', ['$scope', function($scope) {

$scope.wires = [];

$scope.getwireByGroup = function(groupID) {

    $.get('/wire/grpID=' + groupID, function(data) {
        $.each(data.wires, function(index, key){

            var newKey = key;
            newKey.linLastTouched = jQuery.timeago(newKey.linLastTouched);
            $scope.wires.push(newKey);
        });

    });
};

$scope.$on('addwire', function(event, mass) {
    $scope.addwire(mass);
});

$scope.addwire = function(wire){
    $scope.$apply(function() {
        $scope.wires.push(wire);
    });
}

//init data
$scope.getwireByGroup(0);

}]);

其他问题：

这样做的方式迫使我在两个控制器之间建立关系，因为我使用$ broadcast，但如果我不想在两者之间建立关系呢？我是否需要使用有承诺的工厂？你能举例说明我提供的代码吗？

编辑：

首先，我非常感谢Simon H和Keval Bhatt，因为他们帮助我理解了问题，而不仅仅是帮助我找到解决方案。

这是工作代码（角度）：

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

wireApp.factory('wireFactory', function($http){

var wires = [];

return {
    getwireByGroup: function(groupID){

        $http.get('/wire/grpID=' + groupID)
            .success(function(data) {
                $.each(data.wires, function(index, key){
                    var newKey = key;
                    newKey.linLastTouched = jQuery.timeago(newKey.linLastTouched);
                    wires.push(newKey);
                });
            });

        return wires;

    },

    addwire: function(wire){

        $http.post('/wire/create', wire)
            .success(function(data) {
                wires.push(data);
            });
    } 
}               
});


//Parent controller
wireApp.controller('AddWireController', function($scope, wireFactory) {

 $scope.addwire = function(wire) {
    wireFactory.addwire(wire);
};

});

//Child of AddwireController
wireApp.controller('ListWireController', function($scope, wireFactory) {

$scope.wires = [];

$scope.getwireByGroup = function(groupID) {
    $scope.wires = wireFactory.getwireByGroup(groupID);
};

$scope.getwireByGroup(0);

});

Answer 1

原因是你正在将Angular与jQuery混合使用。当您使用Angular函数（例如$http）时，在收到数据后，它会执行“摘要”来更新视图。但Angular不知道$.get收到的数据，因此在这种情况下它不会更新。

我的建议是放弃jquery，转而采用角度方法。但如果你不能，那么每当你需要屏幕更新时，请添加$scope.$apply()

推送后角度ng重复未更新

1 个答案: