--@angularJS--独立作用域scope绑定策略之@符策略

1、index.html:

<!DOCTYPE HTML>
<html ng-app="app">
<head>
    <title>scopeAt</title>
    <meta charset="utf-8">    
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/angular.js"></script>
</head>
<body>
<!-- 下面是指令scope作用域@符demo. -->
<div ng-controller="myCtrl">
    <drink flavor={{ctrlFlavor}}></drink>
</div>
<script src="./scopeAt.js"></script>
</body>
</html>

2、scopeAt.js:

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

myModule.controller('myCtrl', ['$scope', function($scope){
    $scope.ctrlFlavor = "aaaaaaaaaaaaaaa";
}]);
myModule.directive('drink',function(){
    return {
        restrict: 'AE',
        scope:{
            fla:'@flavor'//独立作用域中表达式跟属性之间的交互传值,效果等同下面的link:方法——将属性attrs.flavor的值赋给scope.fla作用域中表达式变量fla中,而属性值来自于控制器赋值
        },
        template: '<div>{{fla}}</div>',
        // link: function(scope, elm, attrs) {
        //     scope.fla = attrs.flavor;//意为将属性flavor的值赋给模板div中的表达式{{fla}}中
        // }
    }
});

原文地址:https://www.cnblogs.com/koleyang/p/4516441.html