AngularJS学习笔记之directive(2)

<div ng-controller="nameController">
 
        父级scope中:<input ng-model="mark"/>
 
        <direct model="mark"/></direct>
 </div>
 

这就完成了,其实只不过是加了一点小把戏,把ng-model换成了model而已。

注意到,这两个例子中,都是使用对象的引用,而不是单纯的字符串,这也是=可以进行双向绑定的关键。

最后是&符号。它的含义是:对父级作用域进行绑定,并将其中的属性包装成一个函数,注意,是属性,意即,任何类型的属性都会被包装成一个函数,比如一个单纯的字符串,或是一个对象数组,或是一个函数方法,如果是字符串、对象数组和无参的函数,那么可想而知,它们都会被包装成一个无参的函数,若是有参的函数方法则反之,并且我们需要为其传入一个对象。现在,分别针对有参和无参两种情况举例。

无参情况↓

JS代码:

.directive("direct",function(){
 
 
 
 
        return{
 
            restrict: 'ECMA',
 
            template: '<div>{{ title }}</div>'+'<div><ul><li ng-repeat="x in contents">{{ x.text }}<                      /li></ul></div>',
 
            scope:{
               
              getTitle:'&',
              getContent:'&'           
        },
            controller:function($scope){
              $scope.title=$scope.getTitle();    //调用无参函数 
              $scope.contents=$scope.getContent();    //调用无参函数
          }
      }
 })
 
 
.controller("nameController",function($scope){
 
    $scope.title="标题";
 
    $scope.contents =[{text:1234},{text:5678}];
});
 

HTML代码:

<div ng-controller="nameController">
      <direct get-title="title" get-content="contents"></direct>
  </div>

这个例子有几个注意点:

1.指令的本地属性(即模板里花括号中的属性)需要从本地取值,所以使用了controller选项,而在controller选项中,两个无参方法分别返回了父级scope中的title字符串和contents对象数组。

2.在HTML中,我们把设置了get-title和get-content的属性值为title和contents,这实际上就完成了与父级scope的绑定,因为我们才可以从那儿取得实质的内容。

OK,有参情况↓

JS代码:

.directive("direct",function(){
return{
            restrict: 'ECMA',
            template: '<div><input ng-model="model"/></div>'+'<div><button ng-click="show({name:model})">show</button>',
            scope:{
                show:'&'             
            }                     
        }
    })
 
    .controller("nameController",function($scope){
        $scope.showName=function(name){
 
          alert(name);
        }
    });
 

HTML代码:

<div ng-controller="nameController">
 
      <direct show="showName(name)"></direct>
 
  </div>

这个例子中,通过模板中的ng-click触发了show函数并将一个叫做model的对象作为name参数传递了进去,而在html中,我们把show的属性值设为showName(name)。这其中的道理跟无参的例子是大同小异的。

大功告成,@,=,&的绑定策略大概就是这样了。有什么需要补充和纠正的,我恳请各位大神向我提出,谢谢!

一些AngularJS相关文章链接

AngularJS权威教程 清晰PDF版 

希望你喜欢,并分享我的工作~带你走近AngularJS系列

带你走近AngularJS - 基本功能介绍

带你走近AngularJS - 体验指令实例

带你走近AngularJS - 创建自定义指令

如何在 AngularJS 中对控制器进行单元测试

在 AngularJS 应用中通过 JSON 文件来设置��态

AngularJS 之 Factory vs Service vs Provider

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/b7e9f0a59edcc374421230c309f7ac28.html