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

阅读() @2019-05-12 11:46:36

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

比如以下代码:

html部分:

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

JavaScript部分:

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

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

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

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

微信二维码