详解angularjs中的隔离作用域理解以及绑定策略

2024-10-08 16:20:51

我们首先看下面的例子：

<!doctype html>
<html ng-app="MyModule">
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 </head>
 <body>
  <hello></hello>
  <hello></hello>
  <hello></hello>
  <hello></hello>
 </body>
 <script src="framework/angular-1.3.0.14/angular.js"></script>
 <script src="IsolateScope.js"></script>
</html>

我们在看看IsolateScope中的代码：

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
 return {
  restrict: 'AE',
  template: '<div><input type="text" ng-model="userName"/>{{userName}}</div>',
  replace: true
 }
});

这时候当运行页面的时候发现只要有一个input中的输入变化了，这时候所有的nput的内容都会变化：

这样就会面临一个问题：我们的指令无法单独使用,于是就有了独立作用域的概念。

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
 return {
  restrict: 'AE',
  scope:{},
  template: '<div><input type="text" ng-model="userName"/>{{userName}}</div>',
  replace: true
 }
});

通过把scope设置为{}，那么每一个指令就具有自己独立的scope空间，于是就不会相互影响了。但是angularjs中最重要的概念是：绑定策略。其具有绑定策略如下：

第一步：我们看看原始的方式，也就是不使用上面的三种绑定方式

<!doctype html>
<html ng-app="MyModule">
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 </head>
 <body>
 <!--控制器MyCtrl下面有指令drink，同时指令drink还有自定义的属性flavor，其值为‘百威'-->
  <div ng-controller="MyCtrl">
   <drink flavor="{{ctrlFlavor}}"></drink>
  </div>
 </body>
 <script src="framework/angular-1.3.0.14/angular.js"></script>
 <script src="ScopeAt.js"></script>
</html>

看看ScopeAt中的内容：

var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
 $scope.ctrlFlavor="百威";
 //在控制器中$scope中设置了ctrlFlavor属性
}])
//定义了drink指令
myModule.directive("drink", function() {
 return {
  restrict:'AE',
  template:"<div>{{flavor}}</div>" ,
   link:function(scope,element,attrs){
   scope.flavor=attrs.flavor;
   //链接的时候把drink指令上的flavor属性放在scope中，然后在template中显示
   }
 }
});

这时候的DOM结构如下：

但是，这种方式要通过attrs.flavor来获取这个指令的属性值，然后需要把这个属性值绑定到scope对象上，最后在template中才能通过{{}}这种形式获取到scope中的值!

第二步：我们使用上面的@来替换第一种方式，因为它每次都需要自己指定link函数：

var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
 $scope.ctrlFlavor="百威";
 //在控制器中$scope中设置了ctrlFlavor属性
}])
//定义了drink指令
myModule.directive("drink", function() {
 return {
  restrict:'AE',
  scope:{
   flavor:'@'
  },
  template:"<div>{{flavor}}</div>"
 }
});

这种方式就是把指令drink中的flavor属性值绑定到scope对象上，而且这是ng为我们自动绑定的。不过，@绑定绑定的是字符串,而不是对象!

第三步：我们来学习一下双向数据绑定

<!doctype html>
<html ng-app="MyModule">
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 </head>
 <body>
 <!--指定了控制器MyCtrl-->
  <div ng-controller="MyCtrl">
   Ctrl:
   <br>
   <!--第一个输入框输入值绑定到ctrlFlavor，也就是控制器MyCtrl对应的ctrlFlavor值中-->
   <input type="text" ng-model="ctrlFlavor">
   <br>
   Directive:
   <br>
   <!--第二个输入框还是通过指令的方式来完成的-->
   <drink flavor="ctrlFlavor"></drink>
  </div>
 </body>
 <script src="framework/angular-1.3.0.14/angular.js"></script>
 <script src="ScopeEqual.js"></script>
</html>

我们再来看看控制器中内容

var myModule = angular.module("MyModule", []);
//指定了控制器对象
myModule.controller('MyCtrl', ['$scope', function($scope){
 $scope.ctrlFlavor="百威";
}])
//指定了指令
myModule.directive("drink", function() {
 return {
  restrict:'AE',
  scope:{
   flavor:'='
   //这里通过'='指定了drink指令的flavor和scope中的双向数据绑定！
  },
  template:'<input type="text" ng-model="flavor"/>'
 }
});

这就是'='这种绑定方式。其实现了双向的数据绑定策略。我们看看最后的DOM结构是怎么样的：

其实双向数据绑定<drink flavor="ctrlFlavor"></drink>是很明显的，需要好好理解双向数据绑定(指令和控制器之间的双向数据绑定)

第四步：我们使用&绑定策略来完成对controller父级方法的调用：

<!doctype html>
<html ng-app="MyModule">
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 </head>
 <body>
  <div ng-controller="MyCtrl">
  <!--接下来是三个自定义的指令greeting指令-->
   <greeting greet="sayHello(name)"></greeting>
   <greeting greet="sayHello(name)"></greeting>
   <greeting greet="sayHello(name)"></greeting>
  </div>
 </body>
 <script src="framework/angular-1.3.0.14/angular.js"></script>
 <script src="ScopeAnd.js"></script>
</html>

其中定义了三个指令greeting,每一个指令都需要调用controller中的一个sayHello方法，（angularjs中如何实现控制器和指令之间交互指出了可以通过定义属性的方式使得控制器和指令之间进行交互，不过这里我们可以通过简单的&完成同样的功能）并且传入不同的参数name值：

var myModule = angular.module("MyModule", []);
//为控制器指定了一个sayHello方法，同时为这个方法可以传入一个参数
myModule.controller('MyCtrl', ['$scope', function($scope){
 $scope.sayHello=function(name){
  alert("Hello "+name);
 }
}])
myModule.directive("greeting", function() {
 return {
  restrict:'AE',
  scope:{
   greet:'&'//传递一个来自父scope的函数用于稍后调用，获取greet参数，得到sayHello(name)函数
  },
  //在template中我们在ng-click中指定一个参数，其指定方式为调用controller中greet方法，传入的参数name值为username
  //也就是ng-model='userName'中指定的参数
  template:'<input type="text" ng-model="userName" /><br/>'+
     '<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>'
 }
});

通过&就可以完成对父级作用方法的调用，而不是采用传统的通过为指令指定属性的方式完成控制器和指令之间的通行!

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

AngularJS中scope的绑定策略实例分析

本文实例讲述了AngularJS中scope的绑定策略.分享给大家供大家参考,具体如下: 当scope选项写为scope:{ }这种形式的时候,就已经为指令生成了隔离作用域,指令的模板就无法访问外部作用域了: 具有隔离作用域的指令最主要的使用场景是创建可复用的组件,组件可以在未知上下文中使用,并且可以避免污染所处的外部作用域或不经意地污染内部作用域. 现在,我们来看看绑定策略的三种形式: @.= .&. 1. @ 本地作用域属性:使用@符号将本地作用域同DOM属性的值进行绑定.指令内部作用域可以
angularJS 中$scope方法使用指南

复制代码代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <script src="http://localhost:81/js/jquery.js"> </script> <script src="http://lo
AngularJS中监视Scope变量以及外部调用Scope方法

在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示.有时,也希望通过jQuery调用Scope的某个方法. 比如以下场景: <div> <button id="jQBtn">jQ Button</button> </div> <div id="ngSection" ng-controller="NGCtrl"> <input typ
详解angularJs指令的3种绑定策略

今天,我来谈谈angularJs指令的3种绑定策略. 公司最近大量使用angularJs做单页面应用,就免不了使用angularJs的一些组件,而有的组件网上有现成的,不必操心,而有的就得自食其力,先前对指令这一块的封装一直理解的不够,故每次使用directive时抽象性都做得不好,往往移植性很差,而要将抽象做好,就不得不使用指令中的隔离作用域,而光有隔离作用域又不能做好前后文的通信问题,要解决通信的问题,就要使用指令中的绑定,正好最近要用,顺便就整理了一些关于指令中的3种绑定策略,并谈了一些自
AngularJS指令中的绑定策略实例分析

本文实例讲述了AngularJS指令中的绑定策略.分享给大家供大家参考,具体如下: 在前面的文章中,我们知道了指令如何生成独立的scope,这一节中我们来仔细研究一下scope中的绑定策略. 总体来说scope的绑定策略分为3种: (1)@ : 绑定字符串 (2)=: 与父控制器进行双向绑定 (3)&:用于调用父scope中的函数 1.基础方式 <test word="{{wordCtrl}}"></test> app.controller('myCon
浅谈AngularJs指令之scope属性详解

AngularJS使用directive()方法类定义一个指令: .directive("name",function(){ return{ }; }) 上面是定义一个指令的主体框架,该方法接受两个参数: 1.第一个参数:name表示定义的指令的名称(angularjs会用这个name注册这个指令) 2.第二个参数:函数,该番薯必须返回一个对象或者一个函数,但通常我们会返回一个对象.return后接的就是返回的对象. 在返回的对象中有一个scope属性,这个属性用来修饰指令的作用域.
Angularjs中三种数据的绑定策略(“@”，“=”，“&”)

前言我们想要实现这样的效果:当我们点击标题的时候展示下面的内容,再点击则收回去. 一.首先回顾一下有哪些绑定策略? 看这个实在是有点抽象了,我们来看具体的实例分析吧! 二.简单的Demo实例 @绑定:传递一个字符串作为属性的值. 比如 str : '@string' 控制器中代码部分示例: myDirec.controller('MyCtrl3',['$scope',function($scope){ $scope.ctrlFlavor="鸡尾酒"; $scope.sayHello=
angularjs指令之绑定策略（@、=、&）

引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到那些变量,因用法的不同,所以需要设置合适的绑定策略. 1:先说指令域scope的@ 我觉得描述很费劲,直接用代码来阐述: AngularJS.html <!doctype html> <html ng-app='myApp'> <head> </head> <body> <div ng-controlle
AngularJs Scope详解及示例代码

一.什么是Scope? scope(http://code.angularjs.org/1.0.2/docs/api/ng.$rootScope.Scope)是一个指向应用model的object.它也是expression(http://www.cnblogs.com/lcllao/archive/2012/09/16/2687162.html)的执行上下文.scope被放置于一个类似应用的DOM结构的层次结构中.scope可以监测(watch,$watch)expression和传播事件.
深入解析AngularJS框架中$scope的作用与生命周期

$scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope 发生改变时也会立刻重新渲染视图. 有了 $scope 这样一个桥梁,应用的业务代码可以都在 controller 中,而数据都存放在controller 的 $scope 中. $scope是一个把view(一个DOM元素)连结到controller上的对象.在

详解angularjs中的隔离作用域理解以及绑定策略

相关推荐

随机推荐