Question

目前我正在使用angular来构建一个原型应用程序，我有一个要显示的人员列表，因此我为这个人建立了一个模型。当从http加载人员列表时，将呈现模型。这很好用

<li class="person" ng-repeat="person in people" >
   <h1>{{person.displayname}}</h1>
     <div class="knockout">
        <div id="person-{{person.displayname}}"></div> // to add d3.js svg
      </div>    
</li>

现在我需要的是，只要渲染模型，就可以使用d3.js在原始html之上添加另一个svg图层。

但是，正如下面显示的代码，当模型更新时，我尝试为每个html添加svg，但它不起作用，因为那时，模型的html没有呈现

    $http.get(href).success(function(data) {                
        $scope.people= data.people; // update the model
            var svg = d3.select('#person-'+data.people[0].name)
                   .append("svg");          
    }).error(function(data, status, headers, config) {

    });

目前我所做的是设置为每个html元素添加svg的超时时间，但最好在模型的html完全呈现后立即得到通知

感谢

Answer 1

问题是，在成功方法离开后渲染人员数组。这是正常的角度行为，因为它们无法在JavaScript中拦截您的代码。回调完成后，角度检查更改。当你试图附加svg东西时，DOM中没有id。

您可以使用$scope.$watchCollection("people", function () { ...并在回调中渲染您的内容，但对ID的绑定功能会对角度的工作方式起作用。尝试为d3.js找到一个角度包装器，你可以在没有id的情况下使用它并作为指令。

在角度，我怎么知道模型何时在html中呈现

1 个答案: