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指令时，它不会执行＆＃39;提交＆＃39;行动。当＆＃34;回复＆＃34;单击commentSection指令中的链接，ng-show指令不适用于reply-box指令。
答案 0 :(得分：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中定义。
希望它有所帮助。
答案 1 :(得分：0)
发生错误是因为comment section指令的作用域不是从父作用域继承的。
要从父作用域继承，您需要将scope指令的comment-section属性设置为true。
scope: true- 该指令创建一个新的子作用域，它原型继承自父作用域。如果多个指令（在同一DOM元素上）请求新范围，则只创建一个新的子范围。因为我们有＆＃34;正常＆＃34;原型继承，这类似于ng-include和ng-switch，因此要警惕双向数据绑定到父作用域基元，以及子作用域隐藏/遮蔽父作用域属性。
comment-section指令可以重写：
app.directive ('commentSection', function(){
return {
restrict:'A',
scope :true,
templateUrl:'../templates/comment-section.html'
};
});