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

I have an angular object(model) created in controller.

我有一个在控制器中创建的角度对象(模型)。

$scope.deletedres = [];

I am trying to append a new DOM to the html body along with the angular object(modal) as shown below.

我试图将一个新的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>');

When I view it with google chrome dev tools, it shows that $scope.deletedres as [object Object] and addRestaurant() function receive nothing.

当我使用谷歌浏览器开发工具查看它时,它显示$ scope.deletedres作为[object Object]和addRestaurant()函数什么都没有收到。

Can anyone enlighten me on this issue?

谁能在这个问题上给我启发?

Is there any other ways to reference/pass an angular modal to a newly created DOM?

有没有其他方法可以将角度模态引用/传递给新创建的DOM?

3 个解决方案

#1

The way you are adding the DOM is wrong. Add the html inside the scope of controller. Use ng-show to show or hide the dom. JQuery is not necessary. Example

添加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>

This is just an example you can improve on

这只是一个可以改进的例子

When you use jQuery to add fragments of HTML there is no way for angular to parse it. Thats the reason your angular code inside the html is working.

当您使用jQuery添加HTML片段时,角色无法解析它。这就是你的html中的角度代码工作的原因。

#2

You can use $compile service.

您可以使用$ 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);

Still as noted by Harish it's wrong. All manipulations with DOM must be done in directives. You can create directive that will be responsible for showing some message (or custom html template) on button click.

正如Harish所指出的那样,这是错误的。所有使用DOM的操作都必须在指令中完成。您可以创建指令,该指令将负责在按钮单击时显示某些消息(或自定义html模板)。

#3

Dmitry Bezzubenkov is right. If you want to manipulate DOM with Angular, you should do that with your custom directive, rather than do that in your controller directly. And to do so, you may refer to $compile service. Here's the official document for that.

Dmitry Bezzubenkov是对的。如果您想使用Angular操作DOM,您应该使用自定义指令执行此操作,而不是直接在控制器中执行此操作。为此,您可以参考$ compile服务。这是官方文件。

However, in your case, I believe what you actually want to do is remove the item from a list while enable the item to be recovered from deletion. In this sense, you may try this approach with Angular:

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

In your controller, create a array for original restaurant list and another for deleted restaurant list. (Let's say, $scope.res and $scope.deletedres)

在您的控制器中,为原始餐馆列表创建一个数组,为已删除的餐馆列表创建另一个(比方说,$ scope.res和$ scope.deletedres)

Register a delete function and bind that to delete button with ng-click. In this function, you will remove the item from $scope.res and then push the item to $scope.deletedres

注册删除功能并通过ng-click将其绑定到删除按钮。在此函数中,您将从$ scope.res中删除该项目,然后将该项目推送到$ scope.deletedres

Register another undo function. Basically do the same thing as delete function but in reverse. That is, move a item from $scope.deletedres to $scope.res. Bind this item to UNDO text in your message box.

注册另一个撤消功能。基本上与删除功能相同,但相反。也就是说,将项目从$ scope.deletedres移动到$ scope.res。将此项目绑定到消息框中的UNDO文本。

use ng-repeat to show your $scope.res list in the main container, and $scope.deletedres in the message box container.

使用ng-repeat在主容器中显示$ scope.res列表,在消息框容器中显示$ scope.deletedres。

Thanks to the 2-way data binding from Angular, now you can delete or undo the action by clicking to different item.

由于Angular的双向数据绑定,现在您可以通过单击不同的项目来删除或撤消操作。

It would be something like this:

它会是这样的:

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

Here's the sample code.

这是示例代码。

#1