2

我有以下控制器，它在启动时查询服务器以获取项目列表，该列表获取所有项目的基本详细信息。然后，当用户单击列表中的某个项目时，它会查询服务器以返回所有项目信息，包括一些 SVG 数据。

function ItemsCtrl($scope, $http) {
  $scope.items = [];
  $scope.selectedItemDesign = null;

  $http.jsonp('/items/all?callback=JSON_CALLBACK').
    success(function (data) {
      $scope.items = data;
    });

  $scope.getItem = function (item) {
    var index = $scope.items.indexOf(item);
    if (!$scope.items[index].SVG) {
      $http.jsonp('/items/byid/' + $scope.items[index]._id + '?callback=JSON_CALLBACK').
        success(function (data) {
          $scope.items[index].SVG = data.SVG;
          $scope.selectedItemDesign = $scope.items[index].SVG;
        });
    } else {
      $scope.selectedItemDesign = $scope.items[index].SVG;
    }
  };
}

然后通过以下方式将 SVG 数据直接绑定到视图：

<div class="span9" ng-bind-html-unsafe="selectedItemDesign">

我遇到的问题是我希望能够将事件附加到 SVG 中的标签，以便允许用户与 SVG（简单onClick事件）进行交互，但我不知道如何做到这一点......

我以为是后行；$scope.selectedItem = $scope.items[index];然后我就可以访问 DOM 并附加事件，但事实并非如此（DOM 尚未更新）。我也查看了有关指令的信息，虽然我设法设置了一个指令来执行我需要的操作，但它在 SVG 更改时不会触发（即使这样我也不确定它是否是前/后 DOM 更新）。

4

2 回答 2

3

你是对的，你应该在渲染 DOM 之后将 onClicks 添加到你的 SVG 中，并且应该在指令中完成这项工作。

困难的部分（这是一个反复出现的问题）是没有事件告诉您何时应该开始添加这些 onClick。Angular 无法告诉你，因为它不知道 DOM 什么时候准备好。您必须在指令中添加一些东西来启发式地计算出这一点，方法是使用 jQuery 通过 setTimeout 定期观察 DOM 并确定它何时准备好。

于 2012-10-05T16:42:17.093 回答
0

如果您可以控制返回的 html，则可以在 html 绑定到页面后使用 ngInit 调用控制器中的方法。返回 html 后，您需要将其编译到控制器的作用域中。

html:

<div id="results" ng-init="initResults()">Contents...</div>

控制器：

$scope.getHtml = function(){
    // Get html using http call then compile results into current scope
    $http.get("/results").then(function(){    
        $compile(angular.element(document.getElementById('results')).parent().contents())($scope);
    });        
};

$scope.initResults = function(){
    // Html has loaded...
};
于 2016-09-06T09:09:21.663 回答