Question

如何在指令中使用ng-show -variable？

更新2：

这很复杂所以只是添加了一些东西来解释我在做什么：

Controller（只是showBox）：

<section id="section-home" class="s-active"></section>
<section id="section-about" style="margin-top: 990px"></section>
<section id="section-section"></section>

#section-home {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: 1;
}

#section-about,
#section-section {
    z-index: 2;
    position: relative;
}

index.html

$scope.showBox= false;

和指令：

<div class="box-two" myDir="showBox" ng-show="showBox">
    show only when showBox is true
</div>

<div class="panel panel-primary fixed-panel" my-dir data-update-method="'routePanelUpdate'">
    Here is the content
</div>

正如您所看到的，我在范围内有一个update-method，它在面板routePanel处于焦点时调用该方法（作为链接中的元素）。在方法routePanelUpdate中我想看到showBox。

我如何在这里使用隐藏属性？

Answer 1

如果您的目标是将showBox传递到您的指令中，那么您需要做的就是将其添加到您的隔离范围中，如此

scope: {
   showBox: "="
},

然后将它添加到html到指令

 <div class="box-two" my-Dir showBox="showBox">

现在在您的指令中，您将可以访问showbox。 “=”将本地/指令范围属性绑定到父范围属性。因此，在指令中更改它会将其改为外部，反之亦然。

Answer 2

您将使用隔离范围定义指令，因此，您无法访问showBox控制器中定义的MCtr变量...

尝试使用：

angular
  .module('test', [])
  .controller('MyCtrl', function($scope) {
    $scope.panels = [
      {
        id: 1,
        text: 'Panel One',
        hidden: false
      },
      
      {
        id: 2,
        text: 'Panel 2',
        hidden: true
      },
      
      {
        id: 3,
        text: 'Panel 3',
        hidden: false
      },
      
      {
        id: 4,
        text: 'Panel 4',
        hidden: true
      }
    ];
  })
  .directive('myDir', function() {
    return {
      restrict: 'A',
      scope: {
        panel: '=myDir'
      },
      link: function(iScope, iElement, iAttributes) {
        iScope.panel.hidden = false;
      }
    };
  });

.foo {
  background: lightseagreen;
  width: 40%;
  margin: 5px;
  box-sizing: border-box;
  float: left;
  color: #fff;
  font-weight: bolder;
  line-height: 50px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<article ng-app="test">
  <div ng-controller="MyCtrl">
    <div ng-repeat="panel in panels"  my-dir="panel" class="foo" ng-hide="panel.hidden">  
      <span ng-bind="panel.text"></span>
    </div>
  </div>
</article>

在指令中设置ng-show

2 个答案: