AngularJs之scope隔离作用域之@单向文本绑定

上一节说到，在指令中设置scope属性的值为花括号{}，可以切断它与其他控制器之间的联系，如果在html中很多地方都使用到了这个指令，有的需要建立与控制器的联系，有的不需要，这个时候该怎么办呢？我们可以通过传值的方式来做到。

比如以下代码：

html部分：

1 <div ng-app="app" ng-controller="ctr1"> 2     <input type="text" ng-model="color"> 3     <h1 zym-blog color="{{color}}"></h1> 4 </div>

JavaScript部分：

01 var m = angular.module('app', []); 02 m.controller('ctr1', ['$scope', function($scope){ 03     $scope.color = 'red'; 04 }]); 05 m.directive('zymBlog', [function(){ 06     return { 07         restrict : 'AEC', 08         template : '{{color}}<p style="color:{{color}}">赵一鸣AngularJs学习笔记</p>', 09         scope : {} 10     } 11 }]);

运行以上代码，你会发现字体颜色没有发生变化，这个我们要做的是，在使用指令属性scope为花括号的情况下，依然要建立与控制器的联系（使用控制器中的变量值），方法如下：

01 var m = angular.module('app', []); 02 m.controller('ctr1', ['$scope', function($scope){ 03     $scope.color = 'red'; 04 }]); 05 m.directive('zymBlog', [function(){ 06     return { 07         restrict : 'AEC', 08         template : '{{color}}<p style="color:{{color}}">赵一鸣AngularJs学习笔记</p>', 09         scope : {color:'@color'} 10     } 11 }]);

使用@符号：template中的{{color}}引用scope中的color值，scope中的color又是通过@引用html标签属性中的color值，html标签属性中的color可以直接访问控制器中的color属性，这样问题不就解决了吗？