創建角變量作爲屬性值

所以基本上我想manupilate DOM和替換具有角變量attrubute img標籤在畫布標記的div ...創建角變量作爲屬性值

我使用這行代碼：

$("canvas").replaceWith('<img id="editImage" ng-src={{ImageToEdit}}>');

但是最終beeing插入是這樣的：

<img id="editImage" ng-src="{{ImageToEdit}}">

周圍的引號{{ImageToEdit}}停止角度從意識到這是意料之中t的範圍。任何解決方案將不勝感激！

編輯：歐凱所以這是比我想象的......所以莫比你們可以幫助我更好，如果我提供一些更多的背景有點複雜：

所以讓我們先從它的外觀時，頁面加載：

<img id="editImage" class="edit-image" ng-src="{{ImageToEdit}}"> 
<button class="btn btn-success" ng-click="previous()">prev</button> 
<button class="btn btn-success" onClick="invert()">invert</button> 
<button class="btn btn-success" ng-click="next()">next</button>

當一個或下一個被稱爲ImageToEdit改變，但如果反轉（）被調用：

function invert(){ 
img = document.getElementById('editImage'); 
var newpix = Pixastic.process(img, "invert"); 
}

Pixastic。過程將修改DOM並更改img標籤在畫布標記（和刪除NG-src屬性）

所以當例如下一個（）被調用時什麼都不會改變......所以我嘗試做的是電話在下一個（）的函數，從帆布返回數據，並把它放回原img標籤..

$scope.next = function(){ 
var data = resetCanvasToImgAngGetModifiedData(); 
$scope.images[$scope.index] = data; 
if($scope.index == ($scope.images.length -1)){ 
    $scope.index = 0; 
}else{ 
    $scope.index = $scope.index + 1; 
} 
$scope.ImageToEdit = $scope.images[$scope.index]; 
} 


function resetCanvasToImgAngGetModifiedData(){ 
var canvas = document.getElementById("editImage"); 
var dataURL = canvas.toDataURL(); 
$("canvas").replaceWith('<img id="editImage" class="edit-image" ng-src= {{ImageToEdit}}>'); 
return dataURL; 
}

我不明白我是怎麼做到這一點使用指令......作爲原始img標籤將被Pixastic破壞

來源

2014-05-08 BAYELK

爲什麼不使用指令來替換內容而不是使用jQuery。我想這可能會更容易記下錯誤。但是，我不認爲問題在這裏引用。 – Sandeep

對於動態添加的html，您需要使用$ compile服務來編譯動態html內容。 – Chandermani

哦謝謝！當我嘗試你建議的代碼時，我會尋找$ compile – BAYELK

img標記是正確的，但這不起作用我假設，因爲jQuery replaceWith發生在Angular上下文之外（Angula r沒有意識到改變），所以它不會嘗試重新繪製DOM，並且ng-src中的插值表達式不會被評估。

快速和骯髒的修補程序將執行jQuery replaceWith函數裏面的任何適當的角度指令應該在您的上下文中使用像ng點擊。

或者手工編制HTML內容的東西，如：

angular.element($("#canvas")).injector().invoke(function($compile) { 
    var scope = angular.element($("#canvas")).scope(); 
    var compiledImg = $compile('<img id="editImage" ng-src={{ImageToEdit}}>')(scope); 
    $("#canvas").replaceWith(compiledImg); 
});

https://docs.angularjs.org/api/ng/function/angular.element

或者，使用指令來管理元素（最好的）。

來源

2014-05-08 17:09:10

TypeError：無法讀取未定義的屬性'invoke'...是否有一些依賴性需要注入到我的模塊中？在文檔中找不到任何文件... – BAYELK

看起來jquery選擇器在2個位置是錯誤的 - 嘗試將logging.element（$（「＃editImage」））記錄到控制檯，如果該對象返回了DOM對象關於什麼Pixastic。過程對元素做出）嘗試。 –

謝謝！我讀了一下，我同意它不是最漂亮的解決方案，但嘿它的作品:) – BAYELK

創建角變量作爲屬性值

回答

相關問題