angularJS中directive与controller之间的通信

当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢?

这里介绍3种angular自定义directive与controller通信的指令。

1.指令作用域中的"@"

作用:把当前属性作为字符串传递实现指令与html页面元素关联。

<!DOCTYPE html>
<html ng-app="demoapp">
<head lang="en">
    <meta charset="UTF-8">
    <title>angular-directive与controller通信</title>

    <script src="js/angularjs1.4/angular-1.4.6.mini.js"></script>
</head>
<body>
   <div ng-controller="democtrl2">
        <!--给tag2赋值的时候要使用表达式-->
        <mytag tag2="{{attrd}}"></mytag>
    </div>

</body>
</html>
<script>
    var demoapp = angular.module('demoapp', []);

    demoapp.controller('democtrl2', ['$scope', function($scope) {

        $scope.attrd = 'hello';

    }]);

    //scope中tag2属性值为"@",将tag2作为字符串传递与页面中html实现关联
    demoapp.directive('mytag', function() {
        return {
            restrict:"AE",
            scope:{
                tag2:'@'
            },
            template:"<div>{{tag2}}</div>"
        };
  });

</script>

这里首先在html页面中定义了<mytag></mytag>标签,然后定义tag2属性,然后将在controller中定义的attrd属性赋值给标签中的tag2属性。

然后在js中定义了一个mytag的一个指令,在scope中tag2属性值为"@",这样的话tag2的值就是页面中tag2={{attrd}}中的值,而attrd=“hello”。所以tag2=“hello”。其主要的作用是将<mytag></mytag>标签替换为template中的<div>{{tag2}}</div>。

其实等价于:

1 link:function(scope, element, attrs) {//scope为父controller中的scope,element为mytag,attrs为mytag中的属性

2     scope.tag2 = attrs.tag2;  
3 }

其主要的流程是:

1.通过@实现指令与html页面元素进行关联。

2.在控制器中又实现了与页面的关联。

3.通过html实现了控制器和指令之间的联系。

2.指令作用域中的"="

作用:表示与父scope中的属性进行双向数据绑定

<!DOCTYPE html>
<html ng-app="demoapp">
<head lang="en">
    <meta charset="UTF-8">
    <title>angular-directive与controller通信</title>

    <script src="js/angularjs1.4/angular-1.4.6.mini.js"></script>
</head>
<body>
<div ng-controller="democtrl2">
    Ctrl:
    <input type="text" ng-model="attrd2"/>
    <br/>
    Directive:
    <mytag2 tag3="attrd2"></mytag2>
</div>
</body>
</html>
var demoapp = angular.module('demoapp', []);

        demoapp.controller('democtrl2', ['$scope', function($scope) {
           
            $scope.attrd2 = 'hello2';

        }]);
demoapp.directive('mytag2', function() {
           return {
               restrict:"AE",
               scope:{
                   tag3:"="
               },
               template:"<input type='text' ng-model='tag3' />"
           };
        });

具体流程:

1.在html中定义了一个输入框ng-model绑定了controller中的attrd2,同时定义<mytag2></mytag2>标签,然后将controller中的attrd2赋值给tag3。

2.在指令中scope对象中tag3:"=",则表示与父scope中的属性进行双向数据绑定,具体绑定哪个mytag2标签中已经指定了。然后替换为tamplate中的标签显示。

3.通过"="实现了指定中的属性与父scope中的属性进行双向数据绑定,从而当改变一个值时达到互相影响对方的作用。

3.指令作用域中的"&"

作用:表示与父scope中的函数进行传递,稍后进行调用。

<!DOCTYPE html>
<html ng-app="demoapp">
<head lang="en">
    <meta charset="UTF-8">
    <title>angular-directive与controller通信</title>

    <script src="js/angularjs1.4/angular-1.4.6.mini.js"></script>
</head>
<body>
<div ng-controller="democtrl2">
    <mytag3 tagfn="attrd_fn(name)"></mytag3>

    <span>{{fruit}}</span>

</div>
</body>
</html>
var demoapp = angular.module('demoapp', []);

       demoapp.controller('democtrl2', ['$scope', function($scope) {

            //方法传入参数的名称和下面自定义的directive中对象的属性名称要一致
            $scope.attrd_fn = function(name) {
                 $scope.fruit = name;
             }

        }]);

        demoapp.directive('mytag3', function() {
            return {
                restrict:"AE",
                scope:{
                    tagfn:"&" //属性不能有下划线
                },
                template:"<input type='text' ng-model='fruitname'/><button ng-click='tagfn({name:fruitname})'>水果名字</button>" //对象传入的属性名称和controller中方法传入的参数名称一致

            };
        });

具体流程:

1.页面中定义了<mytag3></mytag3>标签,标签中tagfn属性等于controller中定义的attrd_fn函数。

2.自定义mytag3指令中tagfn:"&"则表示directive与controller之间主要进行的是函数的传递。同时将页面上的标签替换为template中的内容。

3.通过页面中tagfn="attrd_fn(name)",template中ng-click时触发的tagfn函数来自controller中的attrd_fn;同时tagfn函数传入的是一个对象,对象的属性名字要和controller中attrd_fn函数中参数名字一致。

为达到简洁的效果我将页面的显示结果放到了一张图片展示,如下:

posted on 2017-10-11 15:36  水行者  阅读(382)  评论(0编辑  收藏  举报

导航