Question

我有一个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

Answer 1

在控制器内部尝试：

$scope.POI = ctrl.getPoi();

HTML：

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

Answer 2

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

在这种情况下，您可以使用POI参数objectEquality为true对象创建监视，以在单个$ 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);
                            }
                }    
            });

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

2 个答案: