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>');

当我使用谷歌浏览器开发工具查看它时，它显示$scope.deletedres作为[对象对象]和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片段时，没有办法让angular解析它。这就是你的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服务。这是official document。

但是，在您的情况下，我相信您实际想要做的是从列表中删除项目，同时启用从删除中恢复的项目。从这个意义上说，你可以尝试使用Angular这种方法：

在您的控制器中，为原始餐馆列表创建一个数组，为已删除的餐馆列表创建另一个数组。（让我们说，$scope.res和$scope.deletedres）
注册删除功能并将其与ng-click的删除按钮绑定。在此功能中，您将从$scope.res中删除该项目，然后将该项目推送至$scope.deletedres
注册另一个撤消功能。基本上与删除功能相同，但相反。也就是说，将项目从$scope.deletedres移至$scope.res。将此项目绑定到消息框中的UNDO文本。
使用ng-repeat在主容器中显示您的$scope.res列表，在消息框容器中显示$scope.deletedres。
感谢Angular的双向数据绑定，现在您可以通过点击不同的项目来删除或撤消操作。

这将是这样的：

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);
              }
           }
        }
    });

这里是sample code。

如何将角度范围对象传递给新创建的DOM

3 个答案: