AngularJS 良好实践：隐藏/显示新的 DOM 元素或编译答案

【问题标题】：AngularJS good practice : Hide/show new DOM elements or compileAngularJS 良好实践：隐藏/显示新的 DOM 元素或编译
【发布时间】：2014-03-07 15:29:09
【问题描述】：

我是 AngularJS 的新手，我想动态更改按钮的行为。

因为我习惯了 JQuery，所以我使用element.attr('ng-click', 'controller.function()');

但是，据我了解，AngularJS 需要编译新的 DOM。但是，在我的脑海里"compile" = "cost".

最佳做法是什么：

更改/添加 DOM 元素，然后在需要时进行编译。
隐藏另一个按钮，只显示/隐藏我需要的按钮。

谢谢！

【问题讨论】：

ng-hide and ng-show directives 或 ng-switch 如果您在多个元素之间切换。据我了解，“Angular 方式”根本不是显式添加或删除 DOM 元素，只是显示或隐藏它们。
你最好有两个不同的按钮，用ng-show一次显示一个必要的按钮。
好的，谢谢两位:)！

标签： javascript jquery angularjs dom

【解决方案1】：

我更喜欢使用 ng-switch 来处理这些类型的事情。它最终变得更加简单，并且在可能的情况下使用现有的角度指令总是一个好主意。从事您项目的其他开发人员会喜欢这种简单性。

http://jsfiddle.net/L9T6J/2/

html...

<div ng-switch="state">
    <button ng-switch-when="0" ng-click="updateState()">Label 1</button>
    <button ng-switch-when="1" ng-click="updateState()">Label 2</button>
</div>

还有 javascript...

$scope.state = 0;
$scope.updateState = function () {
    $scope.state = $scope.state === 0 ? 1 : 0;   
}

【讨论】：

我选择使用这个！因为我是我团队的 AngularJS 的第一步，所以它是否更易于理解很重要。谢谢大家

【解决方案2】：

我通常会像这样用角度来处理这种类型的东西

标记

<button ng-click="myButton.actions[myButton.state]()">
    {{myButton.labels[myButton.state]}}
</button>

范围

$scope.myButton = {
    state: 0,        
    labels: ['label 1','label 2'],    
    actions: [
        function() {$scope.myButton.state = 1;},
        function() {$scope.myButton.state = 0;}
    ]
};

这里有一个小提琴来看看它的实际效果

http://jsfiddle.net/pixelchemist/L9T6J/

【讨论】：

我喜欢你的回答，因为状态/行为变化是按钮本身的一部分。它现在正在使用布尔值和 ng-show，但我认为代码中的内容比这更清楚。谢谢，我试试看：）

【解决方案3】：

这完全取决于指令的应用和范围，我选择两种方式：

如果是在不同的按钮之间（if-elseif-else 等），指令非常简单，一看就明白，我使用 ng-if 或 ng-switch。
如果它是一个独立存在的复杂指令，这意味着它有自己的范围和功能，那么它没有理由让 DOM 变得混乱。例如，如果您在 DOM 中进行大量搜索，那么您将添加更多数据以进行搜索，那么相反，如果您仅在使用时销毁并重建它。如果您有大量要显示/隐藏的自定义指令，它也会使 DOM 变得混乱。

如果您的应用程序有多个包含复杂性的繁重指令，并且您仅在单击按钮后才使用它们，则创建/销毁比隐藏/显示指令更有意义（如果指令包含它的数据，则有帮助）正在从服务中获取）。

此外，在需要时调用子应用程序感觉更正确，而不是隐藏/显示它们，尽管这是个人喜好，我可能错了。

您从第 3 方使用的大多数自定义指令，他们创建/销毁他们的指令而不是显示/隐藏。

不完全确定 $watchers 在隐藏时如何与自定义指令一起使用，但您在创建/销毁有助于提高性能的指令时消除了这种可能性。例如，如果你经常渲染你的 HTML，那么如果你有很多 ng-if/ng-switch，那么 $watchers 就会堆积起来，相反，如果你创建/销毁，那么当 html DOM 被销毁时，Angularjs 就不会了。 t 检查 $watcher 因为它不存在所以你获得性能。

【讨论】：