《AngularJS》——scope的绑定策略

2024-08-27 20:48
文章标签 绑定 策略 angularjs scope

本文主要是介绍《AngularJS》——scope的绑定策略,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

  scope这个对象在Angular中非常重要,可以说要想学好AngularJS,熟练使用Scope时基本功,下面介绍一下Scope的几种绑定策略。

  1、@:把当前的属性作为字符串传递。你还可以绑定来自外层的scope的值,在属性值中插入{{}}即可。下面是代码。

<!DOCTYPE html>
<html  ng-app="MyModule">
<head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="bootstrap-3.0.0/css/bootstrap.css">
</head>
<body><div ng-controller="myCtrl"><drink zk="{{ctrlFlavor}}"></drink></div>
</body>
<script src="angular-1.3.0.14/angular.js"></script>
<script src="scope.js"></script>
</html>

  Controller代码

var myModule=angular.module("MyModule",[]);myModule.controller('myCtrl',['$scope',function($scope){$scope.ctrlFlavor="88888";
}])
myModule.directive("drink",function(){return{restrict:'AE',scope:{zk:'@'},template:"<div>{{zk}}</div>"}
})

  指令drink中有一个zk属性,其上一层的div中的scope有一个ctrlFlavor属性,上面的例子就是讲上层div中scope的值绑定在下层指令drink的zk属性上。

  2、“ = ”  : 与父scope中的属性进行双向绑定

  HTML中的代码,我就简写了啊,与上面的差不多

<div ng-controller="myCtrl">Ctrl:<br><input type="text" ng-model="ctrlFlavor"><br>Directive:<br><drink zk="ctrlFlavor"></drink></div>

  Controller中的代码

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

  在HTML中,有一个文本框,在drink指令的模板中,也有一个文本框,这两个文本框的内容是双向绑定的。也就是说,当上面文本框中的内容改变时,下面的文框中的内容也跟着改变。

  3、“ & ”:传递来自父scope中的函数、稍后调用

<span style="font-family:SimSun;font-size:18px;">  <div ng-controller="MyCtrl"><greeting greet="sayHello(name)"></greeting></div></span>

  Controller代码

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

  这个例子的意思是,在div中绑定一个Controller,这个Controller中定义了一个sayHello的方法,在div中又定义了一个名为greeting的指令,这个指令的greet方法与父层scope的sayHello相互关联,然后我们在Controller中让greeting指令中的scope定义好greet,这样,父scope中的函数就传递到了子scope中。

  上面就是scope的绑定策略中的简单实例,学习AngularJS,要从基础抓起。  

这篇关于《AngularJS》——scope的绑定策略的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1112740

相关文章

SpringBoot如何通过Map实现策略模式

《SpringBoot如何通过Map实现策略模式》策略模式是一种行为设计模式,它允许在运行时选择算法的行为,在Spring框架中,我们可以利用@Resource注解和Map集合来优雅地实现策略模式,这... 目录前言底层机制解析Spring的集合类型自动装配@Resource注解的行为实现原理使用直接使用M

基于@RequestParam注解之Spring MVC参数绑定的利器

《基于@RequestParam注解之SpringMVC参数绑定的利器》:本文主要介绍基于@RequestParam注解之SpringMVC参数绑定的利器,具有很好的参考价值,希望对大家有所帮助... 目录@RequestParam注解:Spring MVC参数绑定的利器什么是@RequestParam?@

Redis 内存淘汰策略深度解析(最新推荐)

《Redis内存淘汰策略深度解析(最新推荐)》本文详细探讨了Redis的内存淘汰策略、实现原理、适用场景及最佳实践,介绍了八种内存淘汰策略,包括noeviction、LRU、LFU、TTL、Rand... 目录一、 内存淘汰策略概述二、内存淘汰策略详解2.1 ​noeviction(不淘汰)​2.2 ​LR

Deepseek使用指南与提问优化策略方式

《Deepseek使用指南与提问优化策略方式》本文介绍了DeepSeek语义搜索引擎的核心功能、集成方法及优化提问策略,通过自然语言处理和机器学习提供精准搜索结果,适用于智能客服、知识库检索等领域... 目录序言1. DeepSeek 概述2. DeepSeek 的集成与使用2.1 DeepSeek API

Redis的数据过期策略和数据淘汰策略

《Redis的数据过期策略和数据淘汰策略》本文主要介绍了Redis的数据过期策略和数据淘汰策略,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录一、数据过期策略1、惰性删除2、定期删除二、数据淘汰策略1、数据淘汰策略概念2、8种数据淘汰策略

SpringBoot中的404错误:原因、影响及解决策略

《SpringBoot中的404错误:原因、影响及解决策略》本文详细介绍了SpringBoot中404错误的出现原因、影响以及处理策略,404错误常见于URL路径错误、控制器配置问题、静态资源配置错误... 目录Spring Boot中的404错误:原因、影响及处理策略404错误的出现原因1. URL路径错

Redis多种内存淘汰策略及配置技巧分享

《Redis多种内存淘汰策略及配置技巧分享》本文介绍了Redis内存满时的淘汰机制,包括内存淘汰机制的概念,Redis提供的8种淘汰策略(如noeviction、volatile-lru等)及其适用场... 目录前言一、什么是 Redis 的内存淘汰机制?二、Redis 内存淘汰策略1. pythonnoe

Python 中 requests 与 aiohttp 在实际项目中的选择策略详解

《Python中requests与aiohttp在实际项目中的选择策略详解》本文主要介绍了Python爬虫开发中常用的两个库requests和aiohttp的使用方法及其区别,通过实际项目案... 目录一、requests 库二、aiohttp 库三、requests 和 aiohttp 的比较四、requ

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情

Redis过期键删除策略解读

《Redis过期键删除策略解读》Redis通过惰性删除策略和定期删除策略来管理过期键,惰性删除策略在键被访问时检查是否过期并删除,节省CPU开销但可能导致过期键滞留,定期删除策略定期扫描并删除过期键,... 目录1.Redis使用两种不同的策略来删除过期键,分别是惰性删除策略和定期删除策略1.1惰性删除策略