angularjs学习笔记3-directive中scope的绑定修饰符

在angularjs中，一个directive返回一个对象，对象存在很多属性，并且可以在directive中自定义自己的scope，而使用自己的scope是为了防止一个directive被使用在多个地方之间发生相互影响，通常这个scope可以被定义为true或者对象，当这个scope被定义为true时，代表这个指令拥有独立的scope，它被多次使用在多个地方之间不会相互影响，例如：

HTML代码

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
    </head>
    <body>
        <hello></hello>
        <hello></hello>

    </body>
    <script src="framework/angular-1.3.0.14/angular.js"></script>
    <script src="IsolateScope.js"></script>
</html>

js代码

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
    return {
        restrict: ‘AE‘,
        //这里是创建了一个独立的scope，以防止各个指令之间相互影响
        scope:true,
        template: ‘<div><input type="text" ng-model="userName"/>{{userName}}</div>‘,
        replace: true
    }
});

演示效果：

你会发现这两个指令之间输入没有互相影响。当你不指定这个directive中的scope属性的时候，例如这样

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
    return {
        restrict: ‘AE‘,
        //这里是创建了一个独立的scope，以防止各个指令之间相互影响
       // scope:true,
        template: ‘<div><input type="text" ng-model="userName"/>{{userName}}</div>‘,
        replace: true
    }
});

那么显示效果如下：

操作其中一个input，那么任何使用这个指令的地方都会被修改。即这个指令的多个实例之间是共享一个 scope的

scope也可以被设定为一个对象，即{},当设定为空对象{}的时候，效果和设置为true一样，这里可以通过将其设定为不为空的对象以达到复用其对应controller中的属性及方法。

要复用其对应controller(即其父scope)中的方法和对象，angular提供了三种修饰符：

第一种为：@，这表示绑定的是一个字符串，而且是单向绑定

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
    </head>
    <body>
        <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>

js 代码

var myModule = angular.module("MyModule", []);
myModule.controller(‘MyCtrl‘, [‘$scope‘, function($scope){
	$scope.ctrlFlavor="111";
}])
myModule.directive("drink", function() {
    return {
        restrict:‘AE‘,
        //这里的
        scope:{
            //@表示把当前属性作为字符串进行绑定

            flavor:‘@‘

        },
        template:"<div>{{flavor}}</div>"

    }
});

首先这个指令会将HTML中的drink标签替换为"<div>{{flavor}}</div>"，而原HTML的<drink flavor="{{ctrlFlavor}}"></drink>存在一个flavor的属性，指定其绑定了一个表达式，而directive中又指定了这个表达式是个字符串 scope:{flavor:‘@‘},这就将drink标签的flavor属性指向了其对应的controller即MyCtrl中的scope中的ctrlFlavor上，这样directive就复用了其controller中的一个属性，但是这种复用或者叫绑定是单向的，只有controller发生改变directive内容才会改变，显示效果如下：

这是第一种修饰符@的作用，简单来就是让directive可以单向绑定其父scope中的属性；

第二种修饰符是=，表示绑定的是其父scope中的属性，但是是双向绑定，代码如下：

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
    </head>
    <body>
        <div ng-controller="MyCtrl">
            Ctrl:
            <br>
            <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>

js代码：

var myModule = angular.module("MyModule", []);
myModule.controller(‘MyCtrl‘, [‘$scope‘, function($scope){
 $scope.ctrlFlavor="111";
}])
myModule.directive("drink", function() {
    return {
     restrict:‘AE‘,
        scope:{
         flavor:‘=‘
        },
        template:‘<input type="text" ng-model="flavor"/>‘
    }
});

这里将flavor依然指向的是其controller的scope中的ctrFlavor属性，但是进行模板替换的时候使用的是ng-model 用来进行双向数据操作，注意到 scope:{flavor:‘=‘},这说明这个directive的flavor属性进行了一个双向绑定，而对应的html中不再是使用{{}}这种单向绑定了，而是直接将这个<drink flavor="ctrlFlavor"></drink>属性指向了controller中的scope中的ctrlFlavor属性，简单来讲，就是利用=修饰符，你可以让你的directive与其父作用域中的某个属性进行双向绑定；

第三种修饰符是&，它的含义是用来绑定directive父作用域中的某个函数，代码如下：

<!doctype html>
<html ng-app="MyModule">
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
 </head>
 <body>
  <div ng-controller="MyCtrl">
   <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>

js代码

var myModule = angular.module("MyModule", []);
myModule.controller(‘MyCtrl‘, [‘$scope‘, function($scope){
 $scope.sayHello=function(name){
  alert("Hello "+name);
 }
}])
myModule.directive("greeting", function() {
    return {
     restrict:‘AE‘,
        scope:{
         greet:‘&‘
        },
        template:‘<input type="text" ng-model="userName" /><br/>‘+
           ‘<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>‘
    }
});

在这里，directive中的scope中设定一个属性为 scope:{ greet:‘&‘},&代表这个指令的greet属性绑定了其父scope中的一个函数，而在HTML中<greeting greet="sayHello(name)"></greeting>greet指向的是其父scope(即controller)的sayHello方法，并传递一个参数name,同时在模板替换中，将ng-click设定为greet属性对应的值，这里传递的参数是一个对象ng-click="greet({name:userName})"，这种写法是用来收集input中输入的值。

时间： 2024-10-15 05:00:54

angularjs学习笔记3-directive中scope的绑定修饰符的相关文章

angularjs中directive声明scope对象时修饰符解释和用法

在angular中我们定义directive方法时,可以看到 return { restrict: 'AE', scope: {}, template: '<div></div>', link: function() {} } 除了代码中出现的属性,还有一些其他的属性可供配置,这里不作详述. 今天我们要说的重点是scope字段. 常规用法设置 scope: { name: '=', age: '=', sex: '@', say: '&' } 假设我们的hml代码如下 &l

AngularJS学习笔记之directive——scope选项与绑定策略

开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细记录的.但是这显然不符合实际开发中的需求,因为实际上,我们经常想要我们的指令能够在特定的情况下与外界进行数据上的交互,这就需要借助绑定策略之手了. 大家知道,当scope选项写为scope:{}这种形式的时候,就已经为指令生成了隔离作用域,现在,我们来看看绑定策略的三种形式:& .= .@. 首先是

AngularJS学习笔记之directive&mdash;scope选项与绑定策略

From:http://www.linuxidc.com/Linux/2015-05/116924.htm scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细记录的.但是这显然不符合实际开发中的需求,因为实际上,我们经常想要我们的指令能够在特定的情况下与外界进行数据上的交互,这就需要借助绑定策略之手了. 大家知道,当scope选项写为scope:{}这种形式的时

AngularJs学习笔记（3）——scope

AngularJS启动并生成视图时,会将根ng-app元素同$rootScope进行绑定. $rootScope是所有$scope对象的最上层,是AngularJS中最接近全局作用域的对象 . 一个ng-app可以有多个controller,$scope的范围局限于每一个controller中 $scope对象就是一个普通的JavaScript对象,我们可以在其上随意修改或添加属性 作用域提供了监视数据模型变化的能力 ,$scope的所有属性,都可以自动被视图访问到 作用域是应用状态的基础.基于

angularjs学习笔记三——directive

1.ng-app此指令声明angular的边界,也就是应用程序入口(当然没有ng—app指令的时候也不要奇怪,还有其他方法可以做入口,angular.bootstrap(element,[modules],config)) 2.ng-bind 就是绑定模板,其实和{{hash}}的效果是一样的,不过要注意的是{{hash}}在各种原因下可能会被用户看到,带来不好的用户体验 3.ng-model 它链接了页面可交互元素(input,textarea之类的)和位于$scope之上的model,这儿有

AngularJS学习笔记(一) 关于MVVM和双向绑定

写在前面: 因为需要开始学习ng,之前在知乎上听大神们介绍ng的时候说这个坑如何的大,学了一阵(其实也就三天),感觉ng做的很大很全,在合适的情境你可以完全使用ng搞定一切.这一点从诸如jqLite之类的鸡肋就能看出来了.所以搞得ng很大.. 更主要的是,ng用一种和之前完全不同的思维方式去组织代码,它就是Model-View-ViewModel(MVVM). 这篇文章结构大概是1.MVVM和双向绑定 2.简单的购物金额计算的例子(转自miaov视频).如有问题还请看客斧正.^_^ 1.MVVM

AngularJS学习笔记（三）数据双向绑定

双向绑定 双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听.数据同步上,关于双向更新,可看下图: 下面,我们通过代码来实现.先不要纠结其中不明白的地方,先来体验下数据绑定的效果. 数据-->视图 这里我们只演示有了数据以后,如何绑定到视图上. <!DOCTYPE html> <html ng-app="App"> <head> <script type="tex

AngularJs学习笔记--directive

原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directives匹配HTML并执行.这允许directive注册行为或者转换DOM结构. Angular自带一组内置的directive,对于建立Web App有很大帮助.继续扩展的话,可以在HTML定义领域特定语言(domain specific language ,DSL). 一.在HTML中引用direc

angularjs 学习笔记 -----结构定义

1.  Module使用方法 var APP =angular.module('fontApp',['ngResource', 'ngRoute', 'ngSanitize']); APP为定义的别名,之后的调用都应尽量使用该别名 'fontApp' ng-app="fontApp" 新版本angular中route被分离出来,各个被使用的Providerdou需要在此处声明. 大型应用应该拆分模块来做,先定义一个服务模块,然后再加载它 angular.module('xmpl.ser