Question

如果这是一个noob问题，我对棱角分明的新人如此道歉。在我的小型Ionic / Angular应用程序中，我需要根据一些基本逻辑只显示3个按钮中的1个。目前我要在我的控制器中使用它：

if ($scope.book.borrowedBy == $rootScope.signedInUser.email) {
    $scope.mode = 'return';
} else if ($scope.book.borrowedBy) {
    $scope.mode = 'request';
} else {
    $scope.mode = 'borrow';
}

$scope.borrow = function() {
    $scope.book.borrowedBy = $rootScope.signedInUser.email;
    $scope.book.$save();
    $scope.mode = 'return';
}

$scope.return = function() {
    $scope.book.borrowedBy = null;
    $scope.book.$save();
    $scope.mode = 'borrow';
}

在我看来这部分：

    <a href="mailto:{{book.borrowedBy}}" ng-show="mode === 'request'" class="button button-block button-positive">
        Request book
    </a>

    <button ng-show="mode === 'return'" class="button button-block button-positive" ng-click="return()">
        Return book
    </button>

    <button ng-show="mode === 'borrow'" class="button button-block button-positive" ng-click="borrow()">
        Borrow book
    </button>

虽然这很有效但感觉很乱。根据最佳实践，这应该是一个指令吗？或者我应该使用ng-if？

是否可以根据指令中的条件输出不同的模板代码（到目前为止我只创建了非常基本的条件）？

如果它应该是一个指令，有人能够给我一个类似行为的例子作为起点吗？

提前致谢

Answer 1

除了使用这两个指令中的任何一个时，你应该记住你的代码ng-show / ng-hide vs ng-if你是否希望html在DOM中？

ng-if 实际上会从DOM树中移除节点，所以不会适用于开发工具中的任何人。
ng-show / ng-hide 只会使用css display：none来删除来自用户可见性的项目。
自定义指令为什么重新发明轮子？如果你只需要显示/隐藏或删除DOM节点，那么angular已经为你做了这个 - 使用它们开箱即用的解决方案。如果你需要真正特殊的逻辑而不解决这个问题，那么你应该编写自己的指令。

所以...它真的取决于你的情况。你必须问自己我是否希望有人能够打开开发工具并取消显示无，然后完全访问被隐藏的逻辑或者它不是一个问题。如果您对此回答“否”，那么我希望用户能够访问逻辑，那么您的选择很简单 - ng-if并完全从DOM中删除节点。

考虑到您的代码，这更符合您的需求 - 这些选择的布尔对象。

Controller ex：

$scope.mode = {
   return: true,
   request: false,
   borrow: false
}

HTML ex：

<button ng-show="mode.return" class="button button-block button-positive" ng-click="return()">
    Return book
</button>

Answer 2

我会看看ngSwitch。 https://code.angularjs.org/1.2.21/docs/api/ng/directive/ngSwitch

ng-if，ng-show或custom指令？关于最佳实践的建议

2 个答案: