ng-src 和 ng-href的用法

最新推荐文章于 2021-06-15 19:58:18 发布

墨染枫林

最新推荐文章于 2021-06-15 19:58:18 发布

阅读量3.2k

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_38055381/article/details/80175413

版权

JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

特殊的ng-src和ng-href

在说明这两个指令的特殊之前，需要先了解一下ng的启动及执行过程：

浏览器加载静态HTML文件并解析为DOM；
浏览器加载angular.js文件；
angular监听 DOMContentLoaded 事件，监听到时开始启动；
angular寻找ng-app指令，确定作用范围；
找到app中定义的Module使用$injector服务进行依赖注入；
根据$injector服务创建$compile服务用于编译；
$compile服务编译DOM中的指令、过滤器等；
使用ng-init指令，将作用域中的变量进行替换；
最后生成了我们在最终视图。

可以看到，ng框架是在DOMcontent加载完毕后才开始发挥作用。

那么在页面开始加载到ng编译完成之前，页面上会一直显示一张错误的图片，因为路径还未被替换，为了避免这种情况，我们使用ng-src指令，这样在路径被正确得到之前就不会显示错误。同理，<a>标签的href属性也需要换成ng-href，这样页面上就不会先出现一个地址错误的链接。

顺着这个思路再多想一点，我们在模板中使用{{}}显示数据时，在ng编译完成之前页面上岂不是会显示出大括号及里面的表达式？确实是这样。为了避免这个，ng中有一个与{{}}等同的指令:ng-bind，同样用于单向绑定，在页面刚加载的时候就不会显示出对用户无用的数据了。尽管这样你可能不但没舒心反而更纠结了，{{}}那么好用易理解，还不能用了不成？好消息是我们依然可以使用。因为我编写的是单页面应用，页面只会在加载index.html的时候出这个问题，只需在index.html中的模板中换成ng-bind就行。其他的模板是我们动态加载的，就可以放心使用{{}}了。

总结一下；ng-src和ng-href等同于html中的src和href，只是ng是在dom加载完毕之后才能够发挥作用，如果在src或href中绑定变量，如果ng没有加载完，会导致链接地址出错，如果用对应的ng-src或ng-href，则不会出现这个问题。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="day2/src/angular.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div ng-app="fristApp">
<div ng-controller="fristController">
<a ng-href="{{addr}}">baidu</a>
<a ng-href="{{addr}}">baidu</a>
<div ng-attr-qianfeng="{{fjc}}">
</div>
</div>
</div>
</body>
<script type="text/javascript">
var myApp = angular.module('fristApp',[]);
myApp.controller('fristController',function($scope){
console.log("fuji");
$scope.addr = "http://www.baidu.com";
$scope.fjc = 'hello';
})
</script>
</html>

墨染枫林

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
ng-src 和 ng-href的用法

特殊的ng-src和ng-href在说明这两个指令的特殊之前，需要先了解一下ng的启动及执行过程：浏览器加载静态HTML文件并解析为DOM；浏览器加载angular.js文件； angular监听 DOMContentLoaded 事件，监听到时开始启动； angular寻找ng-app指令，确定作用范围；找到app中定义的Module使用$injector服务...
复制链接

扫一扫