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的开源工具PACKER2.0.2
Nov 04 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
jquery购物车实时结算特效实现思路
Sep 23 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
May 11 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
js动态引入的四种方法
May 05 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 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 array_merge下进行数组合并的代码
2008/07/22 PHP
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
php上传excel表格并获取数据
2017/04/27 PHP
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
Python处理PDF与CDF实例
2020/02/26 Python
Python urllib.request对象案例解析
2020/05/11 Python
python时间time模块处理大全
2020/10/25 Python
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
外贸业务员求职自荐信分享
2013/09/21 职场文书
编辑硕士自荐信范文
2013/11/27 职场文书
中秋节超市促销方案
2014/01/30 职场文书
《最大的“书”》教学反思
2014/02/14 职场文书
数学检讨书1000字
2014/02/24 职场文书
出国留学计划书
2014/04/27 职场文书
效能风暴心得体会
2014/09/04 职场文书
个人年底工作总结
2015/03/10 职场文书
开学典礼校长致辞
2015/07/29 职场文书
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js