如何將角度范圍對象傳遞給新創建的DOM

Question

我在控制器中創建了一個有角度的對象（模型）。

$scope.deletedres = [];

我試圖將新的DOM連同角對象（模態）一起添加到html主體，如下所示。

$('body').append('<span>'+restaurant.name+' have been removed.</span><a class=&quot;btn-flat yellow-text&quot; href="#"; ng-click="addRestaurant($scope.deletedres[$scope.deletedres.length-1])">Undo<a>');

當我使用Google chrome開發工具查看它時，它表明$scope.deletedres作為[object Object]和addRestaurant（）函數什么都沒收到。

誰能在這個問題上啟發我？

還有其他方法可以將角度模態參考/傳遞給新創建的DOM嗎？

Answer 1

您添加DOM的方式是錯誤的。 在控制器范圍內添加html。 使用ng-show顯示或隱藏dom。 不需要JQuery。 例

<span ng-show="restaurant.delete">{{restaurant.name}} have been removed.</span>
<a class=&quot;btn-flat yellow-text&quot; href="#"; ng-click="restaurant.delete=false">Undo<a>

這只是您可以改進的一個示例

當您使用jQuery添加HTML片段時，無法通過角度解析它。 這就是為什么您的html內的角度代碼正常工作的原因。

Answer 2

您可以使用$ compile服務。

var html = '<span>{{restaurant.name}} have been removed.</span><a class="btn-flat yellow-text" href="#"; ng-click="addRestaurant(deletedres[deletedres.length-1])">Undo</a>';
var linkFn = $compile(html);
var content = linkFn(scope);
$('body').append(content);

正如Harish指出的那樣，這是錯誤的。 所有使用DOM的操作都必須在指令中完成。 您可以創建指令，該指令負責在單擊按鈕時顯示一些消息（或自定義html模板）。

Answer 3

德米特里·別祖本科夫 （ Dmitry Bezzubenkov）是對的。 如果要使用Angular操作DOM，則應使用自定義指令執行此操作，而不是直接在控制器中執行。 為此，您可以參考$compile服務。 這是該文件的正式文件 。

但是，對於您而言，我相信您真正想做的是從列表中刪除該項目，同時使該項目能夠從刪除中恢復。 從這個意義上講，您可以在Angular中嘗試這種方法：

1. 在您的控制器中，為原始餐廳列表創建一個數組，為已刪除餐廳列表創建另一個數組。 （假設$scope.res和$scope.deletedres ）
2. 注冊一個刪除功能， ng-click使用ng-click將其綁定到刪除按鈕。 在此功能中，您將從$scope.res刪除該項目，然后將其推送到$scope.deletedres
3. 注冊另一個撤消功能。 基本上執行與刪除功能相同的操作，但是相反。 也就是說，將項目從$scope.deletedres移至$scope.res 。 將此項目綁定到消息框中的UNDO文本。
4. 使用ng-repeat在主容器中顯示$scope.res列表，在消息框容器中顯示$scope.deletedres 。
5. 由於有了Angular的2向數據綁定，現在您可以通過單擊其他項目來刪除或撤消操作。

就像這樣：

angular
    .module('modelTest', [])
    .controller('MainCtrl', function($scope) {
      $scope.res = [
          {id: 1, name: 'Restaurant1'},
          {id: 2, name: 'Restaurant2'},
          {id: 3, name: 'Restaurant3'}
        ];

      $scope.deletedres = [];           

      $scope.delete = function(id) {
         var item, obj, i, j;
         for(i = 0, j = $scope.res.length; i < j; i++) {
             obj = $scope.res[i];

             if(obj.id === id) {
                $scope.deletedres.push(obj);
                $scope.res.splice(i, 1);
             }
          }
       };

       $scope.undo = function(id) {
           var item, obj, i, j;
           for(i = 0, j = $scope.deletedres.length; i < j; i++) {
              obj = $scope.deletedres[i];

              if(obj.id === id) {
                $scope.res.push(obj);
                $scope.deletedres.splice(i, 1);
              }
           }
        }
    });

這是示例代碼 。