AngularJS的最佳实践：隐藏/显示新的DOM元素或进行编译

Question

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

正如我习惯使用JQuery一样，我使用element.attr('ng-click', 'controller.function()') ;

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

最佳做法是：

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

谢谢 ！

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

Answer 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/

Answer 3

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

1. 如果它位于不同的按钮之间（if-elseif-else等），则该指令非常简单，仅通过查看即可解释，我使用ng-if或ng-switch。

2. 如果它是一个独立存在的复杂指令，这意味着它具有自己的作用域和功能，则没有理由使DOM变得混乱。 例如，如果您在DOM中进行大量搜索，则将添加更多数据以进行搜索，而如果仅在使用DOM时销毁并重建它，则相反。 如果您有大量的显示/隐藏自定义指令，它也会使DOM混乱。

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

同样，当您需要子应用程序而不是隐藏/显示它们时，调用子应用程序感觉更合适，尽管这是个人喜好，我可能是错的。

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

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