Angular $只观看父对象而不是多个子对象

时间:2015-10-12 17:19:40

标签: angularjs angularjs-watch

我有一个div,列出了对象POI = {"address":"Martinsicuro (TE), Italy", "phone":"+39 333 45657", "website':'http://mysite.it"}的属性。 POI由服务拥有的对象。指令的控制器具有从服务获取POI的函数getPoi(),并将其返回到指令。

我目前的HTML是这样的:

<table ng-controller="Controller as ctrl">
    <tr> <!-- address -->
        <td>{{ctrl.getPoi().address}}</td>
    </tr>
    <tr> <!-- phone -->                   
        <td>{{ctrl.getPoi().phone}}</td>
    </tr>
    <tr> <!-- website -->
        <td>
            <a ng-href="{{ctrl.getPoi().website}}"> 
                {{ctrl.getPoi().website}}
            </a>
        </td>   
    </tr>
</table>

控制器

.controller('Controller', function(CurrentPoiService)
{

  this.getPoi = function()
    { return CurrentPoiService.POI; }
}

服务

.service('CurrentPoiService', function()
{

  this.POI = {"address":"Martinsicuro (TE), Italy", "phone":"+39 333 45657", "website':'http://mysite.it"}
}

通过这种方式,我增加了3名观察者。有没有办法只添加一个观察者,因为它是相同的父对象?这是一个JSFiddle 谢谢

[更新1] 这是使用@Charlie

提出的解决方案(仍然无效)JSFiddle

[更新2] 这是有效的JSFiddle

2 个答案:

答案 0 :(得分:0)

在控制器内部尝试:

$scope.POI = ctrl.getPoi();

HTML:

<tr> <!-- address -->
    <td>{{POI.address}}</td>
</tr>
<tr> <!-- phone -->                   
    <td>{{POI.phone}}</td>
</tr>

答案 1 :(得分:0)

正如Claies在评论中提到的那样,你永远不应该从中调用你的数据 以这种方式通过函数查看。

在这种情况下,您可以使用POI参数objectEqualitytrue对象创建监视,以在单个$ watch中查看对象的属性。然后在侦听器中找到您的元素,并以您希望的方式更改值。

$scope.$watch('POI', function(){

    //Assume that $scope.propertyIndex is the current property to display

    angular.element($document[0].querySelector("#myTd" + $scope.propertyIndex)).html(POI.address);
    angular.element($document[0].querySelector("#myTd" + $scope.propertyIndex)).html(POI.phone);
    //etc...

}, true);

你有更好的控制方式。但请记住,如果POI是一个复杂的对象,这种方法是不合适的。

更新:

这是一个使用手表和工厂每秒显示一个随机数的工作示例。您应该能够从中学习并将其应用到您的项目中。

            myApp.controller('myController', function($scope, dataSource) {

                 $scope.poi = {rand: 0};    

                 $scope.$watch('poi', function() {
                    $('#rand').html($scope.poi.rand);
                 }, true);

                dataSource.open($scope);               

            });

            myApp.factory('dataSource', function($interval) {                

                return {                       
                            open: function(scope){
                                $interval(function() {
                                    scope.poi.rand = Math.random();
                                }, 1000);
                            }
                }    
            });