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

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

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

如果你的应用程序有几个包含复杂性的繁重指令而你只在单击一个按钮后使用它们，那么创建/销毁比隐藏/显示指令更有意义（如果指令包含数据，则有帮助）从服务中获得。）

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

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

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

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

3 个答案: