angular入门--绑定字符串
2024-09-01 20:15:46
要使用angularjs,首先得下载并且在页面中调用它
先上源码
<html ng-app="app1">
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title>angularJs Test</title>
<script src="angular.min.js"></script>
</head>
<body ng-controller='ctrl1' >
<span ng-bind='name'>aaaaaaaaaaaa</span>
<script>
var app=angular.module('app1',[]);
app.controller('ctrl1',['$scope',function($scope){
$scope.name="China";
}])
</script>
</body>
</html>
几个说明
1.ng-app代表这是一个angularJs app
2.ng-controller代表这是一个控制器,简单来讲它定义了作用域;
3.如何绑定字符串
<span ng-bind='name'>aaaaaaaaaaaa</span>
<span ng-bind-template='this is :{{name}}'>aaaaaaaaaaaa</span>
第一种方式直接绑定了scope的一个变量
第二种方式可以在绑定scope name的情况下,可以在前面加上this is:
但是无论哪种方式,都会冲掉span里面有的aaaaaaaaaaaaa内容
效果如下
第一种解析结果
第二种解析结果
其实还有第三种方式,不过这种方式当angular没有加载完时,会直接显示在页面上,简单讲页面会显示没有解析的结果,代码和效果也上吧
<span >aaaaaaaa:{{name}}</span>
最新文章
- iOS 网易新闻用到的框架
- HTML 表单
- Force.com微信企业号开发系列(一) - 启用二次验证
- Python3基础 print 输出hello world
- Windows Socket网络编程-2016.01.07
- zend studio导入thinkphp的乱码问题
- IOS-简单计时器的使用
- PHP浮点数的一个常见问题的解答
- 图片变换 矩阵 Bitmap Matrix
- java学习之多线程
- 无法打开 configsource 文件
- MySQL各模块工作配合
- ROS命令
- Redis 学习(一) —— 安装、通用key操作命令
- freemarker写select组件报错总结(一)
- java语言与jvm虚拟机简介
- github下载和上传项目
- websocket client code html
- iframe刷新
- Vuejs——(8)Vuejs组件的定义
热门文章
- java实现最大公约数
- Android 图片裁剪踩坑
- 如何快速修改/替换GIF的背景?
- beta版 tomcat 应用监控指标
- 安装elasticsearch的坑
- SpringBoot 启动配置原理
- Module Error (from ./node_modules/eslint-loader/index.js):解决办法
- FIS3安装与编译
- 谈谈spring-boot-starter-data-redis序列化
- Java 重写hashCode()与equals()