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>

显示结果:







版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

angularjs学习总结 详细教程

1 前言 前端技术的发展是如此之快,各种优秀技术、优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢。 AngularJS是google在维护,其在国外已经十分火热,可是国...

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: 使用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 的 Scope

一、Scope 遇到的问题 问题发生在使用 AngularJS 嵌套 Controller 的时候。因为每个 Controller 都有它对应的 Scope(相当于作用域、控制范围),所以 Co...

动手验证<<深入理解angularjs中的scope>>

上面一篇转载的博文介绍了angularjs中的scope,下面验证下. 嵌套controller 子controller访问父controller中的model         ...

[AngularJS面面观] 5. scope中的两个异步方法 - $applyAsync以及$evalAsync

Angular中digest循环的主干是对于watchers的若干次遍历,直到整个scope中的数据”稳定”下来,这部分实现在这篇文章中已经进行了详尽的介绍。相关的一些细节优化也在这篇文章中进行了分析...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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