angular属性绑定和原生html属性赋值

最新推荐文章于 2021-10-29 11:28:30 发布

「已注销」

最新推荐文章于 2021-10-29 11:28:30 发布

阅读量2.5k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/jeason_chan_zju/article/details/100089216

版权

本文探讨了Angular中的属性绑定与HTML原生属性赋值的异同。Angular提供了单向和双向数据绑定，允许从TS文件到模板的流动，而HTML原生方式仅支持绑定固定值。在Angular中使用原生属性赋值需要特殊处理，不推荐混合使用。此外，介绍了在Angular中如何实现原生事件处理，避免与HTML中的js脚本混淆导致错误。文章强调Angular基于虚拟DOM的模板操作相比原生更加强大。

摘要由CSDN通过智能技术生成

文章目录

1 angualr中属性绑定
2 html属性赋值
3 异同

1 angualr中属性绑定

根据数据绑定的方向和绑定方式共有四种：

使用html的原生绑定方式

<div title="titleNameForDiv">
  <!-- 不用中括号对 -->
  鼠标放到我这里查看本div的title
</div>

原生方式，只支持绑定固定值，因此，就算titleNameForDiv这个变量在angular中的相应的ts文件定义了，这个div的 title也只能是"titleNameForDiv"这个字符串，并不是这个变量的值。
实在想用原生的属性，从ts取值，则要改为

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「已注销」

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题

10-15

在Angular应用中，遇到页面卡顿和表单控件输入延迟的问题通常是由于Angular的变更检测机制和大量DOM操作导致的。Angular的双向绑定是通过脏检查来实现的，当数据发生变化时，它会遍历整个组件树以检测并更新视图。在...

Angular—标签动态绑定属性、绑定html

雷雨天的雷胖子

02-11

3190

目录一、标签动态绑定属性三、绑定html 一、标签动态绑定属性标签的某属性值从TS中定义，然后动态绑定到标签属性。第一步：在TS文件中定义数据 public title = '我是一个新闻组件'; 第二步：在html模板中绑定属性值使用中括号动态绑定数据，代码如下所示。 <div [title]="title"></div> 三、...

参与评论您还未登录，请先登录后发表或查看评论

angular js的data赋值（给类中的一个类属性的属性赋值）

amanda_lh的博客

03-01

3847

data = { price: $scope.projectMaterial.price, priceUnit: $scope.projectMaterial.priceUnit, priceUnitType: $scope.projectMaterial.priceUnitType,

自己使用angular实现html中类似title的功能

weixin_33835690的博客

11-10

418

1)首先写指令 exports.define = function(md) { //这个是写的通用的安全使用apply的服务 md.factory('safeApply', function($rootScope){ return function(scope, fn){ var phase =...

angularjs基础——变量绑定

weixin_34337265的博客

10-21

169

1）弄一个ng-app（angularjs 应用） 2）在里面用ng-model（angularjs 模型）就可以定义一个模型变量 3）使用模版方法就可以输出变量了（例如：{{name}}）示例： <!DOCTYPE html><html><script src="https://cdnjs.cloudflare.com/ajax/libs/angular...

Angular 父子组件传值

yanyi24的博客

01-08

948

前面，我们介绍了基本的属性绑定这些基础，这一节我们将介绍如何使用ng命令生成一个组件，并且还将介绍组件之间的相互属性传值。原文阅读 ng命令生成组件在angular中，通过ngCli生成组件其实是一件很简单的事情。当然，我们直接复制已有的组件，再修改文件名，也是可以的。但是，这样做不会自动引入我们所创建的新组建。所以，ng命令是我们创建组件的首选。接下来，我们将在src/app/components/创建一个dialog组件。 /** * 语法： * ng generate component.

一些前端面试题.pdf

最新发布

06-20

- 类选择器和属性选择器的特定度高于标签选择器。 - 当多个选择器具有相同特定度时，最后定义的选择器将覆盖先前的规则。 - 通用选择器（*）和子代选择器的特定度最低。 ### CSS预处理器 CSS预处理器允许开发者...

jsVailla

02-23

7. **事件处理**：绑定和解绑事件监听器，理解事件冒泡和事件捕获，使用`event`对象获取事件信息。 8. **异步编程**：掌握回调函数、Promise和async/await，用于处理异步操作，如Ajax请求。 9. **ES6及后续版本新...

[removed]javascript的curso

03-07

- DOM（Document Object Model）是HTML和XML文档的结构化表示，JavaScript通过DOM可以操作网页元素。 - 获取元素：使用getElementById、getElementsByClassName、getElementsByTagName等方法。 - 修改元素：改变...

03-09

- DOM（Document Object Model）是HTML和XML文档的结构化表示，JS可以通过DOM API对网页元素进行操作，如添加、删除、修改元素，以及获取元素属性。 3. **事件处理** - 事件是用户或浏览器行为的触发点，如点击、...

angular 表单赋值方法

CommonBorage

01-19

2337

1、setValue({}) 每次赋值都要遍历所有表单元素。若有缺失，则会报错。 2、patchValue({}) 可指定表单元素赋值，比setValue()更灵活。如上图所例， setValue方法: this.validateForm.setValue({ userName:'name', password:'123' }) patchValue方法： this.validateForm.patchValue({ userName:'name', }) 或 this.

angularjs指令-赋值

b422761838的专栏

06-25

1728

angularjs指令

angular 加入原生html,angular属性绑定和原生html属性赋值

weixin_32803887的博客

06-01

843

文章目录1 angualr中属性绑定2 html属性赋值3 异同1 angualr中属性绑定根据数据绑定的方向和绑定方式共有四种：使用html的原生绑定方式鼠标放到我这里查看本div的titlediv>原生方式，只支持绑定固定值，因此，就算titleNameForDiv这个变量在angular中的相应的ts文件定义了，这个div的 title也只能是"titleNameForDiv"这个字符...

Angular添加自定义属性并绑定一个变量 (实用）

chelen_jak的专栏

10-29

912

原文出处：https://blog.csdn.net/moqiuqin/article/details/98730433?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-

html页面传值使用数组,使用Angularjs获取数组中的值并传值到html页面中显示出来...

weixin_33722350的博客

06-03

349

html>Freetrial{{item.imgurl}}{{item.goodstitle}}varapp=angular.module('test',[]);app.controller('FreetrialController',function($scope){$scope.use=function(id,status,item){varflag=false...

angular html模板,使用Angular HTML 模板

weixin_31956641的博客

06-22

1030

Angular HTML 模板定义页面在 Web 应用程序中的布局。我们对Angular HTML 模板的支持包括验证和代码智能补全。设置舞台Angular HTML 模板提供了一种结构化的绑定数据的方式，由组件向最终用户公开。例如，此示例显示使用特定控件制作下拉日历。把它像任何其他输入窗体控件一样，因为它将呈现 UI 并提供支持逻辑。[dataset]=”calData.EVENTS”(sele...

angular5+动态设置页面标题title

xuehu837769474的博客

07-03

2029

在实际的开发项目当中，经常需要对访问网页的title进行动态配置，就像这样的东东，所以今天来记录下怎么动态配置title 一、首先，准备一个 .json的配置文件放置在静态资源assets文件夹下二、把项目的index中的title置空三、由于angular提供了一个title的服务，所以在app.module.ts文件中providers中注入title 四、...

AngularJS：div显示或隐藏

qq_37809783的博客

08-15

5645

使用ng-show在div中显示或隐藏div操作： eg: <div ng-show= "show"> <span>显示按钮</span> </div> 1.点击显示按钮 <div ng-click = "show = true"> <button> click show <

关于div标签的title属性一闪一闪不正常显示的原因

weixin_30416497的博客

03-17

789

弹出了chrome的开发工具就会出现以上问题。转载于:https://www.cnblogs.com/strangerqt/p/4343994.html