关闭

关于angular中controller和指令交互数据:@

标签: angularscopecontroller和指令传值
3348人阅读 评论(1) 收藏 举报
分类:

首先看代码:

html:

<!doctype html>
<html ng-app="app">
    <head>
    </head>
    <body>

        <div ng-controller="MyCtrl">
            <drink flavor="{{ctrlFlavor}}"></drink>
        </div>
        <script src="angular.min.js"></script>
        <script src="js/bb.js"></script>
    </body>
</html>

bb.js

var app = angular.module('app', []);

app.controller('MyCtrl', function($scope){
    $scope.ctrlFlavor = "aaaaaa";
})

app.directive("drink", function(){
    return {
        restrict: "AE",
        template: "<div>{{cc}}</div>",
        link: function(scope, element, attrs) {
            scope.cc = attrs.flavor;            
        }

    }
});

按照上面的写法,输出的是aaaaaa

首先定义了controller中的变量ctrlFlavor,然后赋值给html中drink指令的flavor属性。drink指令中,又定义了模板,模板中包含了一个变量cc,在link中将html中flavor属性

的值(即controller的值aaaaaa)赋值给template的cc完成数据交互。



angular对上面的写法提供了一个简便的写法,如下:

var app = angular.module('app', []);

app.controller('MyCtrl', function($scope){
    $scope.ctrlFlavor = "aaaaaa";
})

app.directive("drink", function(){
    return {
        scope: {
            flavor: '@flavor'
        },
        restrict: "AE",
        template: "<div>{{flavor}}</div>",
        link: function(scope, element, attrs) {
        }

    }
});

首先,scope中的@flavor匹配html中的flavor的值,然后将值传入到scope的flavor中,再匹配template的flavor,完成值的传递。

注意,这里@flavor可以写成@aa,html中drink内也要写成aa="",只要和html中的属性匹配上就好。如果只写一个@符号,则html中必须写成flavor="",和scope中的名字一致。

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:62284次
    • 积分:1379
    • 等级:
    • 排名:千里之外
    • 原创:72篇
    • 转载:32篇
    • 译文:1篇
    • 评论:5条