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

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

  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. C++中复制构造函数和赋值操作符

    先看一个例子: 定义了一个类:

  2. Windows进程间通信(上)

    一.管道 管道(pipe)是用于进程间通信的共享内存区域.创建管道的进程称为管道服务器,而连接到这个管道的进程称为管道客户端.一个进程向管道写入信息,而另外一个进程从管道读取信息. 异步管道是基于字符 ...

  3. 轻松学会文本处理工具之二 linux sed命令

    sed命令的语法格式: sed的命令格式: sed [option]  'sed command'filename sed的脚本格式:sed [option] -f  'sed  script'fil ...

  4. EDD-SPT综合规则

    关于生产运作的计算题· 很急 谢谢·有7项任务需经某设备加工,各任务资料如下.要求:(1)试用EDD-SPT综合规则确定加工顺序(2)分别计算两种规则下的平均流程时间. 任务 J1 J2 J3 J4 ...

  5. nodejs package.json详细解读

    package.json详细内容 它是这样一个json文件(注意:json文件内是不能写注释的,复制下列内容请删除注释): JavaScript { "name": "t ...

  6. PHP:class const

    const变量经常被当做常量用在php的类中,隐含的意思是这个变量是常量,不能被修改.编译器会自动检测,如果被赋值会被提示错误警告. 正确实例1: <?php class test { cons ...

  7. 在Linux中设置共享目录

    1.  是否安装了samba服务 sudo apt-get install samba sudo apt-get install smbfs 2.  创建需要共享的目录/ home/usr/share ...

  8. 在CentOS 7下ISCSI和多路径部署文档【转】

    部署环境 设备:MD3860i, R630, S4820T(生产网络), N2024(管理网络) 操作系统:Centos 7 默认管理口的地址:A控192.168.129.101, B 控192.16 ...

  9. Inno Setup入门(十八)——Inno Setup类参考(4)

    分类: Install Setup 2013-02-02 11:29 406人阅读 评论(0) 收藏 举报 编辑框 编辑框也叫文本框,是典型的窗口可视化组件,既可以用来输入文本,也可以用来显示文本,是 ...

  10. usb-to-isp-for-stm32