栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

AngularJS中isolate scope的用法分析

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

AngularJS中isolate scope的用法分析

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

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

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

AngularJS 全局scope与Isolate scope通信用法示例

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

1. = 的使用

[html]


  


[js]

app.directive('appInfo', function() {
   return {
    restrict: 'E',
    scope: {
     info: '=' //如果是 = 就是info属性的值 赋给 当前scope.info
    },
    templateUrl: 'js/directives/appInfo.html'
   };
});

2. =属性名 的使用

[html]


  Ctrl
  
  Dir
  


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

显示结果:

3. @ = 和 & 的综合使用

html 代码:


     

  
  
  

     


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

模板:



显示结果:

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/92616.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号