Сет-шоу в директиве

0

как можно использовать ng-show -variable в директиве?

Обновление 2:

Это довольно сложно, поэтому просто добавил несколько вещей, чтобы объяснить, что я делаю:

Контроллер (только showBox):

$scope.showBox= false;

index.html

<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>

и директива:

myApp.directive('myDir', function () {
    return {
        restrict: 'A',
        scope: {
            showDirective: '=myDir',
            updateMethod: '=', // this togheter does not work
        },
        link: function (scope, element, attrs) {

            this.routePanelUpdate = function (element) {
                //here the box should be visible

                scope.showDirective = true;
            };

            this[scope.updateMethod](element);
        }
  };
});

Как вы можете видеть, у меня есть метод update в области, и он вызывает метод, когда панель routePanel находится в фокусе (как элемент в ссылке). И в методе routePanelUpdate я хочу видеть showBox.

Как я могу использовать скрытое свойство здесь?

  • 0
    Какой именно ваш желаемый результат?
  • 0
    Я хочу установить showBox = true в директиве
Показать ещё 3 комментария
Теги:
angularjs-directive

2 ответа

0

Если ваша цель - передать showBox в вашу директиву, то все, что вам нужно сделать, это добавить его в область выделения

scope: {
   showBox: "="
},

затем добавьте его в html в директиву

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

Теперь внутри вашей директивы вы получите доступ к showbox. "=" Связывает свойство области локального/директивного свойства с родительской областью. Поэтому изменение его в директиве изменило бы его вне и наоборот.

  • 0
    почему showBox = "showBox", не так ли нг-шоу?
  • 0
    @MinasMinas Вы также можете просто добавить ng-show = "showBox". showBox = "showBox" - это способ передачи переменной в директиву.
0

Вы собираетесь определить директиву с изолированной областью, поэтому вы не можете получить доступ к переменной 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>
  • 0
    это выглядит хорошо. но у меня нет события клика. как я могу использовать его без функции (события)
  • 0
    Вместо использования iElement.bind> iScope. $ Apply ... вы должны использовать напрямую: iScope.showDirective = false;
Показать ещё 12 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню