AngularJS中isolate scope的用法分析


Posted in Javascript onNovember 22, 2016

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

angular js中指令directive有个特别有用的东西,那就是 isolate scope (被隔离的scope)

关于具体他和全局的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">'
  };
});

显示结果:

AngularJS中isolate scope的用法分析

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中isolate scope的用法分析

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
vue如何引用其他组件(css和js)
Apr 13 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
ReactRouter的实现方法
Jan 25 Javascript
详解js界面跳转与值传递
Nov 22 #Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 #Javascript
JavaScript面向对象分层思维全面解析
Nov 22 #Javascript
浅析location.href跨窗口调用函数
Nov 22 #Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 #Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 #Javascript
基于js实现checkbox批量选中操作
Nov 22 #Javascript
You might like
Syphon 使用方法
2021/03/03 冲泡冲煮
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
学习python (2)
2006/10/31 Python
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
Python的Django框架中if标签的相关使用
2015/07/15 Python
Python基本语法经典教程
2016/03/11 Python
Python设计模式之代理模式简单示例
2018/01/09 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
商务日语专业毕业生自荐信
2014/03/27 职场文书
法制宣传教育方案
2014/05/09 职场文书
校外活动方案
2014/08/28 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书