WedX - журнал о программировании и компьютерных науках

Div не отображается при ng-щелчке элемента, возвращаемого пользовательской директивой

Я создал директиву, в которой таблица html успешно возвращается. Один из столбцов - это якорная ссылка <td><a ng-click="showLogDiv()">Show Modified Data</a></td>, по клику которой я хочу показать div, содержащий дополнительные данные, принадлежащие этой строке, но он не отображается.

//logdetails.html - свойство templateUrl моей директивы

<div>
    <table class="table table-hover table-responsive">
        <thead class="table-thead">
            <tr style="background-color:#56a7d6">

                <th>AccessLogId</th>
                <th>EntityName</th>
                <th>EntityId</th>
                <th>RequestType</th>
                <th>Modified Data</th>
                <th>Creation Date</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="value in viewData.logdata">
                <td>{{value.AccessLogId}}</td>
                <td>{{value.EntityName}}</td>
                <td>{{value.EntityId}}</td>
                <td>{{value.RequestType}}</td>
                <!--<td><a ng-click="showLogDetails({{value.ModifiedData| json}})">Show Modified Data</a></td>-->
                <td><a ng-click="showLogDiv()">Show Modified Data</a></td>
                <td>{{value.CreatedDate | date:'medium'}}</td>
            </tr>

        </tbody>
    </table>
    <!--<div ng-show="divShow">Hello</div>   I want to show  {{value.ModifiedData| json}} contents here but even hardcoded Hello value not shown -->
    <div ng-show="divShow">Hello</div>
</div>

В контроллере у меня

 $scope.divShow = false;
        $scope.showLogDiv = function () {
            alert($scope.divShow);
            $scope.divShow = true;
            alert($scope.divShow);
        };

Моя директива

.directive("myActivityLogs", function () {

        return {
            restrict: 'E',
            replace: 'true',
            //template: '<div></div>',
            //template: '<b>{{viewData.logdata[1].ModifiedData}}</b>'
            templateUrl: 'app/modules/appScreen/logdetails.html'
            //scope: {

            //    logsData:'='
            //},
            //link: function (scope, element, attrs) {
            //link: function () {

            //    alert(viewData.logdata);
            //}
        };
    });

Как скрыть/показать часть html, возвращаемую директивой, а также как привязать данные к этой части? Я новичок в angularjs, и сейчас ничего не имеет смысла, поэтому, возможно, я делаю что-то неправильно, поэтому, пожалуйста, объясните подробно, это было бы очень полезно.


Ответы:


1

Один из способов сделать это — использовать директивный контроллер. Вы можете изменить свою директиву следующим образом:

.directive("myDirective", function() {
    return {
      restrict: 'E',
      replace: 'true',
      templateUrl: './logdetails.html',
      scope: {
        viewData: '='
      },
      controller: function($scope) {

        $scope.divShow = false;

        this.showLogDiv = function() {
          $scope.divShow = true;
        };

      },
      controllerAs: 'ctrl'
    };
  })

Затем измените HTML-код вашего шаблона следующим образом, чтобы он использовал контроллер:

<div>
  <table class="table table-hover table-responsive">
    <thead class="table-thead">
      <tr style="background-color:#56a7d6">
        <th>AccessLogId</th>
        <th>EntityName</th>
        <th>EntityId</th>
        <th>RequestType</th>
        <th>Modified Data</th>
        <th>Creation Date</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="value in viewData.logdata">
        <td>{{value.AccessLogId}}</td>
        <td>{{value.EntityName}}</td>
        <td>{{value.EntityId}}</td>
        <td>{{value.RequestType}}</td>
        <td><a href ng-click="ctrl.showLogDiv()">Show Modified Data</a></td>
        <td>{{value.CreatedDate | date:'medium'}}</td>
      </tr>
    </tbody>
  </table>
  <div ng-show="divShow">Hello</div>
</div>

Обратите внимание, что я использовал <a href ng-click="ctrl.showLogDiv()">. Вы можете обратиться к этому рабочему планкеру, чтобы узнать больше.

17.12.2016
Новые материалы

Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..


Для любых предложений по сайту: [email protected]