您的位置：首页 > 运维架构

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

2015-11-18 13:02 495 查看
首先看代码：

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中的名字一致。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  angular scope controller和指令传值
相关文章推荐
新的分享
章节导航