Directive&Directive2.html无法显示。不知道是什么问题
第二章第五节directive中的Directive&Directive2.html有问题。看不到效果。是一片空悲。
2 回答
不是没效果，只是看不出是一个tabs控件
<!doctype html>
<html ng-app="docsTabsExample">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
<script src="framework/angular-1.3.0.14/angular.js"></script>
<script src="Directive&Directive2.js"></script>
</head>
<body>
<my-tabs>
<my-pane title="Hello">
<h5>Hello</h5>
<p>Lorem ipsum dolor sit amet</p>
</my-pane>
<my-pane title="World">
<h5>World</h5>
<em>Mauris elementum elementum enim at suscipit.</em>
<p><a href ng-click="i = i + 1">counter: 0</a>
</p>
</my-pane>
</my-tabs>
</body>
</html>
angular.module('docsTabsExample', [])
.directive('myTabs', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: function($scope) {
var panes = $scope.panes = [];
$scope.select = function(pane) {//点击指令元素中的a链接触发的方法。点击
angular.forEach(panes, function(pane) {//如果panes为空，则不遍历，否则将pane中的selected设置为假。
pane.selected = false;//如果scope数组不为空，则所有scope的selected为假。此处的pane为panes对象的的一个节点
});
//此处的pane为传入的scope。
pane.selected = true;//点击时将selected设置为true，此时active的css类会被触发，即触发了选中状态
};
this.addPane = function(pane) {
//页面第一加载时，第一个tabs也处于激活状态
if (panes.length == 0) {//如果数组长度为0，即数组为空
//调用同一个控制器中的select方法,将子标签中的scope传入
$scope.select(pane);//即设置子指令的selected为true,即展示。
}
panes.push(pane);//无论panes是否为空，将子指令的压入数组
};
},
templateUrl: 'my-tabs.html'//模板链接
};
})
.directive('myPane', function() {
return {
require: '^myTabs',
restrict: 'E',
transclude: true,
scope: {
title: '@'//将myPane中的title属性与父指令中的title属性进行双向绑定，title为字符串
},
link: function(scope, element, attrs, tabsCtrl) {
//此指令触发父指令中的addPane方法。将指令的scope对象传递给父控制器的对应的addPane
//当子指令加载时，触发父指令中的添加方法。
tabsCtrl.addPane(scope); },
templateUrl: 'my-pane.html'//对应的模板链接
};
});
angular.module('docsTabsExample', [])
.directive('myTabs', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: function($scope) {
var panes = $scope.panes = [];
$scope.select = function(pane) {//点击指令元素中的a链接触发的方法。点击
angular.forEach(panes, function(pane) {//如果panes为空，则不遍历，否则将pane中的selected设置为假。
pane.selected = false;//如果scope数组不为空，则所有scope的selected为假。此处的pane为panes对象的的一个节点
});
//此处的pane为传入的scope。
pane.selected = true;//点击时将selected设置为true，此时active的css类会被触发，即触发了选中状态
};
this.addPane = function(pane) {
//页面第一加载时，第一个tabs也处于激活状态，因为当点击第二个tabs时。panes的长度不为空
if (panes.length == 0) {//如果数组长度为0，即数组为空
//调用同一个控制器中的select方法,将子标签中的scope传入
$scope.select(pane);//即设置子指令的selected为true,即展示。
}
panes.push(pane);//无论panes是否为空，将子指令的压入数组
};
},
templateUrl: 'my-tabs.html'//模板链接
};
})
.directive('myPane', function() {
return {
require: '^myTabs',
restrict: 'E',
transclude: true,
scope: {
title: '@'//将myPane中的title属性与父指令中的title属性进行双向绑定，title为字符串
},
link: function(scope, element, attrs, tabsCtrl) {
//此指令触发父指令中的addPane方法。将指令的scope对象传递给父控制器的对应的addPane
//当子指令加载时，触发父指令中的添加方法。
tabsCtrl.addPane(scope); },
templateUrl: 'my-pane.html'//对应的模板链接
};
});
<div class="tabbable">
<ul class="nav nav-tabs">
<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">
<a href="" ng-click="select(pane)"></a>
</li>
</ul>
<div class="tab-content" ng-transclude></div>
</div>
<div class="tab-pane" ng-show="selected" ng-transclude>
</div>
举报
0/150
提交
取消
