Встроенные директивы не работают в рамках пользовательских директив

0

var app = angular.module("myDiscuss", []);
app.controller("TabController", function() {
  this.tab = 0;
  this.subTab = 0;
  this.like = 0;

  this.selectLike = function(setTab) {
    this.like= setTab;
  };

  this.selectTab = function(setTab) {
    this.tab= setTab;
  };

  this.selectSubTab = function(setTab){
    this.subTab = setTab;
  };

  this.isSelected = (function(checkTab){
    return this.tab === checkTab;
  });

  this.isSelectedSub = (function(checkTab){
    return this.subTab === checkTab;
  });

  this.isSelectedLike = (function(checkTab) {
    return this.like === checkTab;
  });
  
});

app.controller('FormController', function($scope) {
  
  $scope.person = {
    name: null
  };
  $scope.people = [];
  $scope.submit = function() {
    if ($scope.person.name) {
      $scope.people.push({name: $scope.person.name});
      $scope.person.name = '';
    }
  };
});

app.directive('replyBox', function(){
  return {
    restrict:'A',
    templateUrl:'../templates/reply-box.html'
  };
});

app.directive ('commentSection', function(){
  return {
    restrict:'A',
    scope :{},
    templateUrl:'../templates/comment-section.html'
    
  };
});
<body ng-app="myDiscuss">
    <div class="container">
      <div class="row">
        <div>
          <div class="thumbnail" ng-controller="TabController as tabs">				
            <div ng-show="tabs.isSelectedLike(1)">
            </div>
            <section class="caption">
              <ul class="nav nav-pills">
                <li ng-class="{ active:like === 1 }" >
                  <a href ng-click="tabs.selectLike(1)">Helpful</a>
                </li>
                <li ng-class= "{ active:tab === 2 }">
                  <a href ng-click="tabs.selectTab(2)">Comment</a>
                </li>
              </ul>
              <div comment-section ng-show="tabs.isSelected(2)"></div>
            </section>
          </div>
        </div>
      </div>
    </div>
</body>

<!--comment-section.html-->
<div class="panel" >
  <form ng-submit="submit()" ng-controller="FormController">
    <blockquote ng-repeat="(index,object) in people" >
      <ul class="nav nav-pills">
        <li ng-class="{ active:subTab === 3 }" >
          <a href ng-click="tabs.selectSubTab(3)">Helpful</a>
        </li>
        <li ng-class= "{ active:subTab === 4}">
          <a href ng-click="tabs.selectSubTab(4)">Reply</a>
        </li>
      </ul>
      <div reply-box ng-show="tabs.isSelectedSub(4)"></div>
    </blockquote>
    <input type="text" ng-model="person.name" name="person.name" />
  </form>
</div>

<!-- reply-box.html -->
<div>
  <input type="text">
</div>

Когда я добавляю директиву reply-box директиву comment-section он не выполняет действие "отправить". Когда "ответ" ссылка в директиве commentSection щелчка по ng-show директива не работает для reply-box директивы.

  • 0
    Создайте планкр, также в чем ошибка?
  • 0
    Вы можете сузить код и привести меньший пример?
Показать ещё 2 комментария
Теги:
forms

2 ответа

0

Ошибки возникают из-за того, что область действия директивы раздела комментариев не наследуется от родительской области.

Определить область, которая наследуется от родительской области

Чтобы наследовать от родительской области, вам нужно установить свойство scope в директиве comment-section к true.

Из документации AngularJS:

scope: true - директива создает новую дочернюю область, которая прототипически наследуется от родительской области. Если более чем одна директива (в том же элементе DOM) запрашивает новую область, создается только одна новая дочерняя область. Поскольку у нас есть "нормальное" прототипное наследование, это похоже на ng-include и ng-switch, поэтому будьте осторожны с привязкой двухсторонних данных к примитивам родительской области и скрытием/скрытием дочерних объектов свойств родительской области.

Директива comment-section может быть переписана так:

app.directive ('commentSection', function(){
  return {
    restrict:'A',
    scope :true,
    templateUrl:'../templates/comment-section.html'

  };
});
0

Ну, я не вижу input type='submit' в вашем коде, возможно, поэтому ng-submit не работает,

Более того, я думаю, что ваша директива ng-show не работает, потому что ng-controller="TabController as tabs" заканчивается здесь

     <div class="thumbnail" ng-controller="TabController as tabs">              
        <div ng-show="tabs.isSelectedLike(1)">
        </div>
        <section class="caption"  >
          <ul class="nav nav-pills">
            <li ng-class="{ active:like === 1 }" >
              <a href ng-click="tabs.selectLike(1)">Helpful</a>
            </li>
            <li ng-class= "{ active:tab === 2 }">
              <a href ng-click="tabs.selectTab(2)">Comment</a>
            </li>
          </ul>
          <div comment-section ng-show="tabs.isSelected(2)"></div>
        </section>
      </div>

Таким образом, вы вызываете свой ng-show="tabs.isSelectedSub(4)" возвращают ничего, потому что этот метод не определен в вашем FormController.

Надеюсь, поможет.

  • 0
    но когда не было никакой специальной директивы, она работала правильно, когда весь код находился в одном и том же файле. Когда директива удалена из нее, функция submit работает
  • 0
    поэтому я должен добавить ту же функцию в FormController также. или есть какой-либо метод, который можно использовать функцию TabController

Ещё вопросы

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