现在发现,当初的自己真的是太菜了,为什么你在指令中更改数据,没有作用呢?这其实是原型链的问题。

  详细的我就不在这里说了,有位大神早已发布了这个内容,在这里复制个地址给大家,有兴趣的可以看看

  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则不会。

angularJS在创建指令需要注意的问题(指令中使用ngRepeat)的更多相关文章

  1. 带你走近AngularJS 之创建自定义指令

    带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...

  2. AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令

    1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...

  3. AngularJS之一个元素上绑定多个指令作用域

    前言 众所周知,我们在自定义指令时,会指定它的作用域,即scope设置项(默认值为false). 且,scope设置项,可以有三种值,从而也就代表三种不同的作用域,下面我们再来一起回顾下: 指令之sc ...

  4. vue指令详解和自定义指令

    在vue中,指令以v-开头,是一种特殊的自定义行间属性,指令的职责就是其表达式的值改变时相应地将某些行为应用到DOM上 指令使用的示例 在下面的运行结果中可以看到,v-html是可以解析html标签的 ...

  5. angular学习笔记(三十)-指令(9)-一个简单的指令示例

    学了前面这么多关于指令的知识,现在就用指令来写一个小组件:expander 这个组件的功能就是点击开展菜单,再点击收起菜单: ↑↓点击展开收起 下面来看它的代码: html: <!DOCTYPE ...

  6. JSP基本的语法、3个编译指令、7个动作指令、9个内置对象

    一.jsp概述 JSP是java server page的缩写,其本质是一个简化的servlet,是一种动态网页技术标准.jsp页面是在HTML页面中嵌入java程序段.使用jsp开发的应用程序能够跨 ...

  7. Vue框架(二)——Vue指令(v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令)、todolist案例、Vue实例(计算、监听)、组件、组件数据交互

    Vue指令 1.v-once指令  单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...

  8. Docs-.NET-C#-指南-语言参考-预处理器指令:C# 预处理器指令

    ylbtech-Docs-.NET-C#-指南-语言参考-预处理器指令:C# 预处理器指令 1.返回顶部 1. C# 预处理器指令 2015/07/20 本节介绍了以下 C# 预处理器指令: #if ...

  9. 创建一个目录info,并在目录中创建一个文件test.txt,把该文件的信息读取出来,并显示出来

    /*4.创建一个目录info,并在目录中创建一个文件test.txt,把该文件的信息读取出来,并显示出来*/ #import <Foundation/Foundation.h>#defin ...

  10. Java内存模型一个经典例子-指令重排序与CPU指令多发射导致执行结果异常

    先上代码: import java.util.concurrent.BrokenBarrierException; import java.util.concurrent.CyclicBarrier; ...

随机推荐

  1. 复习TextView(查漏补缺)

    android:drawableLeft="@drawable/ic_launcher"----设置图片居左 android:paddingLeft="20dp" ...

  2. python2.7学习记录之四

    1.从raw_input()读取的内容永远以字符串的形式返回,把字符串和整数比较就不会得到期待的结果,必须先用int()把字符串转换为我们想要的整型 2.list增加元素 为 append() 3.d ...

  3. WCF配置文件的问题(位置)

    引用过了远程的WCF服务,会自动生成配置文件,但是这个配置的位置,尽量放在applicationSettings的前面 刚才测试了,貌似放后面,会报错(执行的时候,这个问题,需要继续试验) (待验证) ...

  4. VBS控制鼠标移动和点击(附源代码下载)

    森思:想用vbs来控制鼠标的移动和点击,虽然按键精灵可以做到,但做这么简单的事情不想启动那么大一个程序,所以自己用VC写了一个小程序,可以让VBS来控制鼠标移动和点击. 用法: 移动鼠标到桌面坐标20 ...

  5. 常用的linux系统监控命令整理

    找到最耗CPU的java线程ps命令 命令:ps -mp pid -o THREAD,tid,time 或者 ps -Lfp pid 结果展示: 这个命令的作用,主要是可以获取到对应一个进程下的线程的 ...

  6. Away 3d 基本属性

    出处:http://blog.sina.com.cn/s/blog_59f0ac9d0101ci2j.html View3D在初始化时候就已经创建的Camera3D 所以有时候没有创建Camera3D ...

  7. Flex4 flashVars 传值

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...

  8. 开始制作国产的 scratch

    首先分析下API和数据格式: https://api.scratch.mit.edu/proxy/featured  GET   23.235.37.162:443 返回数据与对应栏目: commun ...

  9. linuxmint卸载软件

    删除你已经卸载掉的软件包的命令为 sudo apt-get autoclean 还有一类软件包,我们每个人都应该删除,那就是你已经卸载了,但是一些只有它依赖而别的软件包都不需要的软件包还留在你的系统里 ...

  10. 关于在MyEclipse中页面中文乱码的问题

    1.首先在Window>preferences>General>Workspace中改为UTF-8. 2.将项目的Properties>Resource改为UTF-8. 3.将 ...