内置指令在自定义指令中不起作用答案

【问题标题】：Inbuilt directives do not work within custom directive内置指令在自定义指令中不起作用
【发布时间】：2016-03-28 07:35:46
【问题描述】：

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 指令。

【问题讨论】：

创建一个plunkr，还有什么错误？
你能缩小代码范围并举一个更小的例子吗？
从控制器函数中移除多余的括号。
执行 ng-click 时未显示回复框指令

标签： javascript jquery html angularjs forms

【解决方案1】：

好吧，我在您的代码中没有看到任何 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 中定义。

希望对你有帮助。

【讨论】：

但是当没有自定义指令时，当整个代码在同一个文件中时，它可以正常工作当从其中删除指令时，提交功能可以工作
所以我也应该在 FormController 中添加相同的功能。或者有什么方法可以使用 TabController 的功能

【解决方案2】：

出现错误是因为注释部分指令的范围没有从父范围继承。

定义一个继承自父作用域的作用域

要从父作用域继承，您需要将 comment-section 指令的 scope 属性设置为 true。

来自AngularJS documentation：

scope: true - 该指令创建一个新的子范围，该子范围在原型上继承自父范围。如果多个指令（在同一个 DOM 元素上）请求一个新范围，则只会创建一个新的子范围。因为我们有“正常”的原型继承，这就像 ng-include 和 ng-switch，所以要小心 2-way 数据绑定到父作用域原语，以及子作用域隐藏/隐藏父作用域属性。

comment-section 指令可以这样重写：

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

  };
});

【讨论】：