0

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

我当前的 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 个观察者。有没有办法只添加 1 个观察者，因为它是同一个父对象？这是一个JSFiddle 谢谢

[更新 1] 这是使用 @Charlie 提出的解决方案的（仍然不工作的）JSFiddle

[更新 2] 这是工作的JSFiddle

4

2 回答 2

0

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

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

$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);
                            }
                }    
            });
于 2015-10-12T17:55:40.193 回答
0

在您的控制器内部尝试：

$scope.POI = ctrl.getPoi();

HTML：

<tr> <!-- address -->
    <td>{{POI.address}}</td>
</tr>
<tr> <!-- phone -->                   
    <td>{{POI.phone}}</td>
</tr>
于 2015-10-12T17:23:41.480 回答