现在发现，当初的自己真的是太菜了，为什么你在指令中更改数据，没有作用呢？这其实是原型链的问题。
详细的我就不在这里说了，有位大神早已发布了这个内容，在这里复制个地址给大家，有兴趣的可以看看
http://www.angularjs.cn/A09C
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
忙活了一天终于写出了一个完整的angular指令，在后面的文章再来讲我制作的排序指令，由于还是菜鸟此文章仅仅用来借鉴，希望各位看到有不对的地方，希望能够指点一下。
这里首先要讲的是angular在创建指令是经常会遇到的几个问题。
1.作用域绑定策略
这个其实不知道被讲了多少篇了，但是只有自己开始动手写才发现是很挺复杂的。这里只讲绑定策略，另外的scope:true和scope:false就跳过了
第一个方法是“@”，这个的意思其实是绑定字符串，实际上是拿到该对象的值,并且是单向的 外部作用域可以影响内部作用域，但指令内部作用域却无法影响外部的作用域，在绑定的时候需要加上{{}} 代表引用scope作用域的值，没加上{{}}代表引用的是一个普通的字符串
第二个方法是“=”，这个的意思是绑定对象，是双向的外部作用域可以影响内部作用域，但指令内部作用域也可以影响外部的作用域。
第三个方法是“&”，这个是用与controller和指令之间的交互的，控制器的方法可以绑定在这上面使用
另外在html上如果出现用”-“的命名方法 则在js文件中需要”-“后面的第一个字母要大写，例如<hello-world></hello world> 则在js文件中需要用helloWorld命名
2.在指令中使用ng内置指令
这是非常常见的操作，但是类似ng-repeat,ng-switch等等指令是会创建自己的作用域的，这个时候你就需要注意作用域的问题了，这个作用域问题是挺致命的。
下面写个例子给大家看看关于ng-repeat的问题
这个是一个手风琴效果，内容是来自于《用angularJS开发下一代Web应用的》，没读过的朋友建议买来看一下，还是有很大帮助的，效果就像bootstrap的手风琴，但是我要讲一些书上没有说的东西，大家可以将代码复制下来执行看看。
var myApp = angular.module('MyApp', []);
myApp.controller('myCtrl', ['$scope', function($scope){
$scope.isReverse = false;
$scope.menuItems = [{
title : "This first",
content : "This first content"
},{
title : "This second",
content : "This second content"
},{
title : "This third",
content : "This third content"
}];
}]);
myApp.directive('accroding',function(){
return {
controller: function($scope, $element, $attrs, $transclude) {
var tabItems = [];
this.getOpen = function(selectedItem){
angular.forEach(tabItems, function(value, key){
if(value != selectedItem){
value.isOpen = false;
}
});
}
this.addItem = function(tabItem){
tabItems.push(tabItem);
}
},
restrict: 'EA',
template: '<div ng-transclude></div>',
replace: true,
transclude: true,
link: function($scope, iElm, iAttrs, controller) {
}
};
});
myApp.directive('expender', [function(){
return {
scope: {
title : '=expenderTitle',
isReverse : '=expenderIsreverse',
},
require: '^accroding',
restrict: 'EA',
template: '<div>'+
'<div ng-click="toggle()">{{title}} || isReverse:{{isReverse}}</div>'+
'<div ng-show="isOpen" ng-transclude></div>'+
'</div>',
replace: true,
transclude: true,
link: function($scope, iElm, iAttrs, controller) {
$scope.isOpen = false;
controller.addItem($scope);
$scope.toggle = function(){
$scope.isOpen = !$scope.isOpen;
controller.getOpen($scope);
$scope.isReverse = !$scope.isReverse;
}
}
};
}]);
<accroding>
<expender ng-repeat="item in menuItems" expender-title="item.title" expender-isreverse="order.isReverse">
{{item.content}}
</expender>
</accroding>
<br>
<div ng-repeat="item in menuItems">
{{item.content}} | {{item.title}} || {{isReverse}}
</div>
没错，你发现了什么，你明明有绑定策略‘=’去绑定，但是你点击div触发toogle()的时候，却发现外部的isReverse没有发生改变，指令内部的isReverse却发生改变了。也就是说你并没有双向绑定，这是什么问题呢？让我们看看修改之后的例子
var myApp = angular.module('MyApp', []);
myApp.controller('myCtrl', ['$scope', function($scope){
$scope.order = {
isReverse : "false",
predicate : "2"
};
$scope.menuItems = [{
title : "This first",
content : "This first content"
},{
title : "This second",
content : "This second content"
},{
title : "This third",
content : "This third content"
}];
}]);
myApp.directive('accroding',function(){
return {
controller: function($scope, $element, $attrs, $transclude) {
var tabItems = [];
this.getOpen = function(selectedItem){
angular.forEach(tabItems, function(value, key){
if(value != selectedItem){
value.isOpen = false;
}
});
}
this.addItem = function(tabItem){
tabItems.push(tabItem);
}
},
restrict: 'EA',
template: '<div ng-transclude></div>',
replace: true,
transclude: true,
link: function($scope, iElm, iAttrs, controller) {
}
};
});
myApp.directive('expender', [function(){
// Runs during compile
return {
scope: {
title : '=expenderTitle',
isReverse : '=expenderIsreverse',
predicate : '=expenderPredicate',
},
require: '^accroding',
restrict: 'EA',
template: '<div>'+
'<div ng-click="toggle()">{{title}} {{isReverse}} {{predicate}}</div>'+
'<div ng-show="isOpen" ng-transclude></div>'+
'</div>',
replace: true,
transclude: true,
link: function($scope, iElm, iAttrs, controller) {
$scope.isOpen = false;
controller.addItem($scope);
$scope.toggle = function(){
$scope.isOpen = !$scope.isOpen;
controller.getOpen($scope);
$scope.isReverse = !$scope.isReverse;
$scope.predicate = "22";
}
}
};
}]);
<accroding>
<expender ng-repeat="item in menuItems" expender-title="item.title" expender-isreverse="order.isReverse" expender-predicate="order.predicate">
{{item.content}}
</expender>
</accroding>
<div ng-repeat="item in menuItems">
{{item.content}} | {{item.title}} || {{order.isReverse}} || {{order.predicate}}
</div>
把isReverse写成了对象的形式发现可以相互作用了，这就是ngRepeat的问题，ngRepeat创建了一个新的作用域，如果我们用基本数据类型去绑定的话，是无法成功的，需要将数据编程对象的形式去绑定，这样在指令内部改变值之后才可以与外部的作用域绑定，另外尽量在指令中不去使用ng-if，因为ng-if是根据节点决定添加和删除的节点的，当一个元素被ng-if从DOM中删除时，与其关联的作用域也会被销毁。而且当它重新加入DOM中时，则会生成一个新的作用域，而ng-show和ng-hide则不会。