ng-src 和 ng-href的用法

拼搏现实的明天。 2022-05-26 13:14 124阅读 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，则不会出现这个问题。

1.  <!DOCTYPE html**>**  
2.  **<html>**  
3.      **<head>**  
4.          **<meta** charset="UTF-8"**>**  
5.          **<title></title>**  
6.          **<script** src="day2/src/angular.js"**></script>**  
7.          **<style** type="text/css"**>**  
8.          **</style>**  
9.      **</head>**  
10.     **<body>**  
11.           
12.         **<div** ng-app="fristApp"**>**  
13.             **<div** ng-controller="fristController"**>**  
14.                 **<a** ng-href="\{ \{addr\}\}"**>**baidu**</a>**  
15.                 **<a** ng-href="\{ \{addr\}\}"**>**baidu**</a>**  
16.                 **<div** ng-attr-qianfeng="\{ \{fjc\}\}"**>**  
17.                   
18.             **</div>**  
19.             **</div>**  
20.               
21.         **</div>**  
22.     **</body>**  
23.     **<script** type="text/javascript"**>**  
24.         var myApp = angular.module('fristApp',\[\]);  
25.         myApp.controller('fristController',function($scope)\{  
26.             console.log("fuji");  
27.             $scope.addr = "http://www.baidu.com";  
28.             $scope.fjc = 'hello';  
29.         \})  
30.     **</script>**  
31. **</html>**