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

最新推荐文章于 2023-04-19 18:20:29 发布

MIT的梦

最新推荐文章于 2023-04-19 18:20:29 发布

阅读量6.6k

点赞数 1

分类专栏：思想心得文章标签： angular scope controller和指令传值

本文链接：https://blog.csdn.net/teddyu_leo/article/details/49905505

版权

思想心得专栏收录该内容

74 篇文章 0 订阅

订阅专栏

首先看代码：

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中的名字一致。

MIT的梦

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
关于angular中controller和指令交互数据：@

首先看代码：html： bb.jsvar app = angular.module('app', []);app.controller('MyCtrl', function($scope){ $scope.ctrlFlavor =
复制链接

扫一扫