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

【问题标题】：How to pass an angular scope object to a newly created DOM如何将角度范围对象传递给新创建的 DOM
【发布时间】：2015-04-15 14:56:39
【问题描述】：

我在控制器中创建了一个角度对象（模型）。

$scope.deletedres = [];

我正在尝试将一个新的 DOM 与 angular 对象（模态）一起添加到 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 吗？

【问题讨论】：

你为什么要直接操作 DOM 而不是让 Angular 为你做这些？

标签： javascript jquery angularjs dom angularjs-scope

【解决方案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 中的 Angular 代码正常工作的原因。

【讨论】：

【解决方案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 模板）。

【讨论】：

【解决方案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 的 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);
              }
           }
        }
    });

这是sample code。

【讨论】：