关闭

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

标签: angularjs
1782人阅读 评论(0) 收藏 举报
分类:

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>

显示结果:







1
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:301376次
    • 积分:4972
    • 等级:
    • 排名:第5647名
    • 原创:190篇
    • 转载:6篇
    • 译文:9篇
    • 评论:66条
    最新评论