AngularJS中isolate scope的用法分析

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了AngularJS中isolate scope的用法分析，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本文实例讲述了AngularJS中isolate scope的用法。分享给大家供大家参考，具体如下：

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

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

用法示例

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

1. = 的使用

[html]

[js]

2. =属性名 的使用

[html]

[js]

显示结果：

3. @ = 和 & 的综合使用

html 代码：

js控制：

显示@ = 和 &综合的 var app = angular.module('isolateApp',['$scope',"$element",function($scope,$element){ $scope.getMove = function(name,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" }; })

模板：

{{name}}
Move:
Select Move Type: