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中的几个运算符
Jun 29 Javascript
javascript克隆对象深度介绍
Nov 20 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
vue登录路由验证的实现
Dec 13 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 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
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
找到一点可怜的关于dojo资料,谢谢作者!
2006/12/06 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
python xml解析实例详解
2016/11/14 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
集团公司总经理岗位职责
2013/12/20 职场文书
《草原》教学反思
2014/02/15 职场文书
交通事故私了协议书
2014/04/16 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
创业计划书之熟食店
2019/10/16 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
python如何读取.mtx文件
2021/04/22 Python
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python
带你学习MySQL执行计划
2021/05/31 MySQL
Python实现科学占卜 让视频自动打码
2022/04/09 Python