AngularJS - 如何設置事件綁定的HTML（ngBindHtml）

我有以下控制器，在啓動時查詢服務器的項目列表，它獲取所有項目的基本詳細信息。然後，當用戶點擊列表中的項目時，它將查詢服務器以返回項目信息的全部，包括一些SVG數據。AngularJS - 如何設置事件綁定的HTML（ngBindHtml）

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更新）。

來源

2012-10-05 Siyfion

你是對的，你應該在DOM渲染後將onClicks添加到SVG中，並且該工作應該在指令中完成。

困難的部分（這是一個反覆出現的問題）是沒有事件告訴你什麼時候應該開始添加onClicks。 Angular沒有辦法告訴你，因爲它不知道DOM何時準備就緒。你必須在指令中添加一些東西，通過使用jQuery通過setTimeout定期觀看DOM並計算出它準備好的時間。

來源

2012-10-05 16:42:17

讓人驚訝，並有我希望會有一個事件時，DOM更新解僱了！：/仍然，我沒有想過使用超時定期檢查，所以感謝指針。 – Siyfion

如果您可以控制返回的html，則可以使用ngInit在HTML綁定到頁面後調用控制器中的方法。一旦你返回了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-06 09:09:21 markvpc

AngularJS - 如何設置事件綁定的HTML（ngBindHtml）

回答

相關問題