angularjs学习之八（angularjs中isolate scope的使用）

灰太狼 2022-08-02 04:52 220阅读 0赞

angular js中指令directive有个特别有用的东西，那就是 isolate scope （被隔离的scope）

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

[AngularJS 全局scope与Isolate 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">'
    			};
    		});

显示结果：

![Center][]  
3. @ = 和 & 的综合使用

html 代码：

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"
    		   };
    	   })

模板：

显示结果：

![Center 1][]

[AngularJS _scope_Isolate scope]: http://www.cnblogs.com/hubcarl/p/4202053.html
[Center]: /images/20220731/8477a05ee13f43149a4ba1cea527ea7e.png
[Center 1]: /images/20220731/a20671b033594266a2567f8c30c07fc1.png