如何有条件地隐藏Angular指令中的元素

Question

我有一个Angular指令。

这是它的模板的副本

<div>
    <div>
        <div></div>
        <div></div> <!-- to be hidden in some places -->
        <div></div>
    </div>
</div>

这个指令不是动态的。它只在页面加载时呈现一次。我想在某些地方使用相同的指令，但不使用特定的div。最好的方法是什么?

我思考并研究了以下内容

我是一个新手，我的方法可能是错误的。请指出我可能犯的错误。

<div ng-show="somemodel"></div>

• 使用一些模型来显示或隐藏它。但问题是，我将不得不创建一个模型/变量在每个各自的控制器。

• 根据传递给指令的值更改链接函数并隐藏div

• 我不认为手表的使用，因为一旦用户加载了一个页面，什么都不会改变。

是否有任何方法可以在使用指令时传递值/配置?这样，与该指令相关的所有内容都可以组合在一起。

<div directive-name showParticularDiv = "true" />
<div directive-name showParticularDiv = "false" />

编辑后实现的一些方法

视图

<div date-picker-directive></div>

模板

<div class="timebuttons">
    <div class="ui button" ng-click="vm.getPredefinedDataButtons(365)">LAST YEAR</div> 
    <div class="ui button" ng-click="vm.getPredefinedDataButtons(90)">LAST QUARTER</div>
    <div class="ui button" ng-click="vm.getPredefinedDataButtons(31)">LAST MONTH</div> 
    <div class="ui button" ng-click="vm.getPredefinedDataButtons(7)">LAST WEEK</div>
    <div class="ui button" ng-click="vm.getPredefinedDataButtons(0)" ng-show="vm.showToday">TODAY</div>
    <div class="ui button blackbody" id="givedate" ng-click="showRange = !showRange">CUSTOM RANGE</div>
</div>

这工作。如果我使用一个来自控制器的变量来隐藏/显示div，它工作得很好。

如果我使用的是指令的作用域，而不是控制器中的模型，ng-click就会停止工作。

<div date-picker-directive show-today="false" />

ng-click在模板中停止工作

Answer 1

最好的方法是通过属性(如在你的最后一个代码块)和绑定在scope指令的属性。更多关于作用域绑定的信息可以在这里阅读。此外，重要的是要记住，指令的名称和它的属性将被转换为串大小写，所以如果你有一个名称为myItem的属性或指令，它应该在HTML中写成my-item。

angular
.module('app', [])
.controller('mainCtrl', function($scope) {
  $scope.show = false;
}).directive('dynamicDirective', function() {
  return {
    restrict: 'A',
    scope: {
      showHidden: '=?'
    },
    template: '<div ng-show="showHidden">hidden</div>'
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="mainCtrl">
  <input type="checkbox" ng-model="show">Show hidden
  <div dynamic-directive show-hidden="show"></div>
</div>

在你的情况下，指令不能调用控制器的函数，直到你通过属性传递它或与指令共享作用域(基于第一个选项的例子):

angular
.module('app', [])
.controller('mainCtrl', function($scope) {
  $scope.show = false;
  $scope.getPredefinedDataButtons = function(amount) {
    console.log('Called with amount', amount);
  };
}).directive('dynamicDirective', function() {
  return {
    restrict: 'A',
    scope: {
      showHidden: '=?',
      callback: '&?'
    },
    templateUrl: '/templates/dynamic-dir.html',
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="mainCtrl">
  <input type="checkbox" ng-model="show">Show hidden
  <div dynamic-directive show-hidden="show" callback="getPredefinedDataButtons(amount)"></div>
  <script type="text/ng-template" id="/templates/dynamic-dir.html">
    <div class="timebuttons">
    <div class="ui button" ng-click="callback({amount: 365})">LAST YEAR</div> 
    <div class="ui button" ng-click="callback({amount: 90})">LAST QUARTER</div>
    <div class="ui button" ng-click="callback({amount: 31})">LAST MONTH</div> 
    <div class="ui button" ng-click="callback({amount: 7})">LAST WEEK</div>
    <div class="ui button" ng-click="callback({amount: 0})" ng-show="showHidden">TODAY</div>
    <div class="ui button blackbody" id="givedate" ng-click="showRange = !showRange">CUSTOM RANGE</div>
</div>
  </script>
</div>

请注意我是如何将参数传递给callback from指令的，要知道Angular在这种情况下使用的是命名参数。