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

显示结果:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

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>

显示结果:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

angularjs学习之八(angularjs中isolate scope的使用)的更多相关文章

  1. Angularjs学习---ubuntu12.04中karma安装配置

    Angularjs学习---ubuntu12.04中karma安装配置中常见的问题总结   karma启动时出现了很多问题: 1.安装karma前提条件 安装karma首先要安装nodejs,npm然 ...

  2. angularjs学习笔记3-directive中scope的绑定修饰符

    在angularjs中,一个directive返回一个对象,对象存在很多属性,并且可以在directive中自定义自己的scope,而使用自己的scope是为了防止一个directive被使用在多个地 ...

  3. AngularJs学习笔记(3)——scope

    AngularJS启动并生成视图时,会将根ng-app元素同$rootScope进行绑定. $rootScope是所有$scope对象的最上层,是AngularJS中最接近全局作用域的对象 . 一个n ...

  4. Angularjs学习---ubuntu12.04中karma安装配置中常见的问题总结

    karma启动时出现了很多问题: 1.安装karma前提条件 安装karma首先要安装nodejs,npm然后才可以安装karma.nodejs,npm的安装过程可以参考文章:Angularjs学习- ...

  5. AngularJs学习笔记-AngularJS权威教程学习笔记

    AngularJS是什么? AngularJS是一种构建动态Web应用的结构化框架.主要用于构建单页面Web应用, 增加抽象级别,使构建交互式的现代Web应用变得更加简单. AngularJS使开发W ...

  6. Angularjs学习---官方phonecat实例学习angularjs step0 step1

    接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用. 1.下载 ...

  7. 一些关于angularJS的自己学习和开发过程中遇到的问题及解决办法

    这篇文章也许会不定时更新,主要记录这段时间内自己遇到的angularjs学习开发的一些问题的解决办法.本文以摘抄为主,主要目的还是将自己遇到的困惑在各个地方查到的解决办法的汇总,给自己留个备忘吧. 1 ...

  8. AngularJS 全局scope与Isolate scope通信

    在项目开发时,全局scope 和 directive本地scope使用范围不够清晰,全局scope与directive本地scope通信掌握的不够透彻,这里对全局scope 和 directive本地 ...

  9. angularjs 中的scope继承关系——(2)

    转自:http://www.lovelucy.info/understanding-scopes-in-angularjs.html angularjs 中的scope继承关系 ng-include ...

随机推荐

  1. NYOJ 814 又见拦截导弹

    又见拦截导弹 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 大家对拦截导弹那个题目应该比较熟悉了,我再叙述一下题意:某国为了防御敌国的导弹袭击,新研制出来一种导弹拦 ...

  2. 【HTML/XML 1】HTML 速成总结

    导读:反反复复的看完了HTML的速成材料,前面学习了牛腩,所以这块知识只能是作为一种旧知识的复习.和机房重构时的SQLHelper一样,刚开始都是稀里糊涂的用了,后面系统的学习后,才知道为什么要那样用 ...

  3. tomact和eclipse的关联

    tomact和eclipse的关联有很多文档,这里说下下面的问题: 问题: tomact安装成功,点击startup.sh能正常访问,通过eclipse启动后,不能打开8080页面  解决: l  重 ...

  4. 数三角形(codevs 3693)

    题目描述 Description 给定一个n×m的网格,请计算三个点都在格点上的三角形共有多少个(三角形的三点不能共线).下图为4×4的网格上的一个三角形.  输入描述 Input Descripti ...

  5. STL学习笔记(一) 容器

    0.前言随机访问迭代器: vector.string.dequeSTL的一个革命性的方面就是它的计算复杂性保证 条款01:慎重选择容器类型 c++提供的容器:标准STL序列容器:vector.stri ...

  6. Codevs 1299 切水果 水一发

    时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 简单的说,一共N个水果排成一排,切M次,每次切[L,R]区间的所有水果(可能有的 ...

  7. 程序包com.sun.image.codec.jpeg不存在解决方法

    https://blog.csdn.net/u011627980/article/details/50436842

  8. T1229 数字游戏 codevs

    http://codevs.cn/problem/1229/ 题目描述 Description Lele 最近上课的时候都很无聊,所以他发明了一个数字游戏来打发时间.  这个游戏是这样的,首先,他拿出 ...

  9. ansible、zabbix、tcpdump

    Ansible 源码安装 https://blog.csdn.net/williamfan21c/article/details/53439307 Ansible安装过程中常遇到的错误 http:// ...

  10. org.apache.catalina.connector.ClientAbortException: java.io.IOException: APR error:-32

    org.apache.catalina.connector.ClientAbortException: java.io.IOException: APR error:-32 Most likely, ...