AngularJS替换整个元素

假设我有以下几点：

<div myDiv>
   <!-- Some more tags -->
   <div ng-click="run()">Run</div>
</div>

跑

当执行

run（）

时，我想用新的

替换整个

。我怎样才能做到这一点与角度

---

需要明确的是：当执行

run（）

时，我希望整个

被完全删除，并替换为一个新的

，我将通过AJAX调用获得它。这与拥有一组初始内容，然后加载更多内容不同。

您必须使用元素指令，然后将

replace

属性设置为true：

app.directive('myDiv', function(){
    return {
        restrict: 'E',
        replace: true,
        template: '<div>' + 
                      '<div ng-click="run()">Run</div>' +
                  '</div>',
        link: function(scope, element, attrs){
            scope.run = function(){
                // do smth here
            };
        }
    }
});

app.directive（'myDiv'，function（）{
返回{
限制：'E'，
替换：正确，
模板：“”
“跑”+
'',
链接：函数（范围、元素、属性）{
scope.run=函数（）{
//你在这儿玩吗
};
}
}
});

呈现前的Html：

<my-div></my-div>

<div>
   <div ng-click="run()">Run</div>
</div>

渲染后的Html：

<my-div></my-div>

<div>
   <div ng-click="run()">Run</div>
</div>

跑

但我只想在run（）执行后替换元素。现在，这将在加载页面时执行，而在调用ng click时不会发生任何事情。@user834045您做错了什么。例如，如果您想在单击按钮时显示其他内容，可以这样做：

scope.show=“first”；scope.run=function（）{scope.show=“second”}

，在模板中：

单击后的初始内容

我想要的是基本上用一组新的DOM替换整个DOM。这个DOM已经包含了信息，但是当run（）执行时，我希望删除整个DOM，并放置一个新的DOM。这是一种非常糟糕的使用Angular的方法。您应该从AJAX调用中获取JSON/XML，然后将其解析为模板，并且除了在指令中之外，不应该直接进行DOM操作？我相信有更多的技术来执行你的任务。