Question

我在角度官方文档中找到了一个关于指令的示例，该指令适合我创建Tab元素。网址为：https://docs.angularjs.org/guide/directive在＆＃34;创建通信指令＆＃34;。这是关于＆＃34; Tab＆＃34;接口。但是我需要对它进行小的修改。

基本上我需要2种＆＃34; Tab＆＃34;。第1个就像那里我将tabType定义为tab的样本，第二个我只需要没有窗格的标题标题，然后我将tabType定义为url。定义为tabType的{{1}}应该在点击它时链接到另一个页面。

我现在正在做的是，我在tab标头指令范围内放置了一个名为url的变量/参数，以区分我想要的类型。并将tabType放在窗格包装器的模板上，使其仅在ng-if为tabType时可用。以下是我所做的2条指令的摘要，可在Plunker处找到：

tab

在HTML元素我这样做：

  var bngapp=angular.module('BApp',[])
  .controller('BCtrl', function($scope){
      angular.element(document).ready(function(){

      });
  })
  .directive('biqTab', function(){//named biqTab
      return {
      restrict : 'E',
      transclude: true,
      scope : {
          tabType : '@'//tab/url
      },
      controller : ['$scope', function($scope){
          var self = this;
          var panes = $scope.panes = [];

          $scope.click = function(pane) {
          angular.forEach(panes, function(pane) {
              pane.selected = false;
          });
          pane.selected = true;
          };
          self.addPane = function(pane) {
          if (panes.length === 0) {
            $scope.click(pane);
          }
          panes.push(pane);
          };
      }],
      template: '<div class="biq-tab">\n\
          <ul class="nav nav-tabs">\n\
        <li ng-repeat="pane in panes" ng-class="{active:pane.selected}">\n\
          <span ng-click="select(pane)">{{pane.title}}</span>\n\
        </li>\n\
          </ul>\n\
          <div>Tab type: {{tabType}}<br> Child length:{{panes.length}}</div>\n\
          <div ng-if="tabType===\'tab\'" class="tab-content" ng-transclude></div>\n\
        </div>'
      };
  })
  .directive('biqTabItem', function(){
      return {
      require: '^^biqTab',
      restrict: 'E',
      transclude: true,
      scope: {
        title: '@', url:'@'
      },
      link: function(scope, element, attrs, biqTabCtrl) {
          biqTabCtrl.addPane(scope);
      },
      template: '<div class="tab-pane" ng-show="selected">test item\n\
          <div ng-transclude></div>\n\
        </div>'
      };
  });

问题，当我将<div ng-controller="BCtrl"> <biq-tab tab-type="url"> <biq-tab-item title="Frontpage" url="biqsoft.com"> </biq-tab-item> </biq-tab> </div>更改为＆＃39; url＆＃39;，然后将panes.length检测为0，即使它上面有子元素，在Plunker的页面上看到。我认为模板上的任何更改都与我的tabType一样，不会影响范围内的变量。请注意，如果我使用ng-if更改ng-if，它会像我预期的那样正常，但如果ng-show是＆＃39; url＆＃39，我仍然会尝试让它真的不存在;使用tabType。

任何帮助将不胜感激，提前谢谢。

Answer 1

ngIf以优先级600执行，您的指令以优先级0执行，因此ngIf在您的指令之前运行。 ngIf的目的是元素的条件创建。当您将类型设置为URL时，永远不会创建元素，并且您的指令实例永远不会链接，因为它们不会像预期的那样存在。由于没有添加任何链接，因此计数为0。

要了解有关ngIf的更多信息，请访问https://docs.angularjs.org/api/ng/directive/ngIf

要得到答案，请提出问题。

Angular with ng-if在指令模板，它是更改范围方法/变量

1 个答案: