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 に答える