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指令的属性中。有关范围绑定的更多信息，请阅读here。此外，重要的是要记住，指令名称及其属性将转换为kebab-case，因此如果您的名称为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>

在你的case中，指令不能调用控制器的函数，直到你通过属性传递它或者使用指令共享范围（例子基于第一个选项）：

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>

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

如何有条理地隐藏角度指令的元素

我已经考虑过并研究了以下

1 个答案: