angularjs学习之八(angularjs中isolate scope的使用)

原创 2015年07月09日 09:53:14

angular js中指令directive有个特别有用的东西,那就是 isolate scope (被隔离的scope)

关于具体他和全局的scope 有什么区别,可以参考下面这篇博文:

AngularJS 全局scope与Isolate scope通信

本文主要讲解 其具体的几种使用方式:

1. = 的使用

[html]
		 <div class="card" ng-repeat="app in apps">
           <app-info info="app"></app-info>
         </div>
	     [js]
	     app.directive('appInfo', function() { 
			  return { 
				restrict: 'E', 
				scope: { 
				  info: '=' //如果是 = 就是info属性的值 赋给 当前scope.info
				}, 
				templateUrl: 'js/directives/appInfo.html' 
			  }; 
			});

2. =属性名 的使用

[html]
	     <div ng-controller="AppCtrl as appctrl">
           Ctrl
           <input type="text" ng-model="appctrl.ctrlFlavor">

           Dir
           <div ab="25" drink="123456" flavor="appctrl.ctrlFlavor"></div>
        </div>

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

		app.controller("AppCtrl", function() {
			var appctrl = this; 
			appctrl.ctrlFlavor = "blackberry";
		});

		app.directive("drink", function() {
			return {
				scope: {
					flavor: "=ab"
				},
				template: '<input type="text" ng-model="flavor">'
			};
		});
显示结果:


3. @ = 和 & 的综合使用

html 代码:

<div class="mainController" ng-app="isolateApp">
	     <div ng-controller="AppCtrl">
		     <div class="row">
			     <character
				 name="Roman Regins"
				 image="img/p1.jpg"
				 movetype="movetype"
				 use-move="getMove(name,movetype,move)"
				 class="col-xs-4"></character>
				 <character 
				 name="Seth Rollins"
				 image="./img/p2.jpg"
				 movetype="movetype"
				 use-move="getMove(name,movetype,move)"
				 class="col-xs-4"></character>
				 <character 
				 name="Dean Ambrose"
				 image="./img/p3.jpg"
				 movetype="movetype"
				 use-move="getMove(name,movetype,move)"
				 class="col-xs-4"></character>
			 </div>
		 </div>
	  </div>
js控制:
//显示@ = 和 &综合的
	   var app = angular.module('isolateApp',[]);
	   app.controller("AppCtrl",['$scope',"$element",function($scope,$element){
	       $scope.getMove = function(name,movetype,move){
			   console.log(name+'$$$'+movetype+'$$$'+move);
		   }
		   $scope.movetypes = ['amove','bavi','cmp4'];
           $scope.movetype = $scope.movetypes[0];
	   }])
       .directive("character",function(){
	       return {
			   restrict:"E",
			   scope:{
				   name:"@",  //@指的是属性的值赋给name 仅此而已
				   image:"@", 
				   movetype:"=", //表示类型等于当前属性的值
				   useMove:"&" //&表示对应的函数的引用 及该属性对应的函数别名就是他了
			   },
			   controller:"AppCtrl", //只有这里声明了 才会将select选项载入进来
			   replace:true,
			   templateUrl:"shield_isolate.html"
		   };
	   })
模板:
<script type="text/ng-template" id="shield_isolate.html">
	    <div class="panel panel-default">
			<div class="panel-body">
				<div>
					<figure>
					   <img src="{{image}}">
					   <figcaption>{{name}}</figcaption>
					</figure>
				</div>
			</div>
			<div>Move:
			   <input type="text" ng-model="value" class="form-controller"/>
			</div>
			<div>
			   Select Move Type:
			   <select ng-model="movetype"
				   ng-options="movetype for movetype in movetypes">
			   </select>
			</div>
			<div class="panel-footer clearfix">
				<div class="btn btn-primary"
				  ng-click="useMove({name:name,movetype:movetype,move:value})"
				>Action!</div>
				//这里的":"前的三个参数分别对应 父函数的三个参数的名称
				//":" 后的三个参数则对应 给定值scope 的三个属性 以便一一对应传值
			</div>
		</div>
	</script>

显示结果:







CCS3属性之text-overflow:ellipsis;的用法和注意之处

语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分...

angularjs中directive声明scope对象时修饰符解释和用法

在angular中我们定义directive方法时,可以看到  return { restrict: 'AE', scope: {}, template: '', li...

AngularJs学习笔记--Scope

一、什么是Scope?scope[http://code.angularjs.org/1.0.2/docs/api/ng.rootScope.Scope]是一个指向应用model的object。它也是...

AngularJS学习:directive的scope

scope The scopeproperty can be false, true, or an object: false (default): No scope will be create...

《精通使用AngularJS开发Web App》(三)--- 深入scope,继承结构,事件系统和生命周期

深入探讨 Scope 作用域 每一个 $scope 都是类 Scope 的一个实例。类 Scope 拥有可以控制 scope 生命周期的方法,提供事件传播的能力,并支持模板渲染。 作用域的...

AngularJS: 使用Scope时的6个陷阱

AngularJS: 使用Scope时的6个陷阱 在使用AngularJS中的scope时,会有6个主要陷阱。如果你理解AngularJS背后的概念的话,这6个点其实非常的简单。但是在具...

AngularJS: 使用Scope时的6个陷阱

在使用AngularJS中的scope时,会有6个主要陷阱。如果你理解AngularJS背后的概念的话,这6个点其实非常的简单。但是在具体讲述这6个陷阱之前我们先要讲两个其它的概念。 概念1: ...

AngularJS学习笔记之directive——scope选项与绑定策略

开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细...

[AngularJS面面观] 11. scope事件机制 - 事件系统在Angular框架中的应用

此篇文章是angular事件机制相关的最后一篇文章。 主要介绍一下事件系统在Angular框架本身中的一些应用场景,看看在什么场景下使用事件是比较合适的。 移除scope后的广播 有过定义指...

AngularJS作用域$scope事件路由与广播

AngularJS作用域支持两种事件传播方式: 事件从子作用域路由到父作用域——$emit()事件从父作用域广播到所有子作用域——$broadcast() $on()用于注册监听 $scope.$o...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:angularjs学习之八(angularjs中isolate scope的使用)
举报原因:
原因补充:

(最多只允许输入30个字)