AngularJS中ng-app的赋值问题

 学习AngularJS的时候看了很多文档,觉得自己缺少实践,就开始写demo强化。真的不写不知道,一写吓一跳,发现虽然文档看了很多,但是还是有很多小的细节没有掌握。

 最重要的ng-app,只要看过一点AngularJS,就一定见过它。

 本来是没有发现的,但是学到AngularJS的视图复用时,却踩了一个坑,半天没有走出来。

模块代码如下:

  <div ng-app="hello">
    <input ng-model="greeting.text">
    <p>{{greeting.text}},angularp>
div>

`

JS代码:
function helloAngular( scope) { scope.greeting={ text:'hi' } }

“`

报错如下:
AngularJS中ng-app的赋值问题_第1张图片

效果如下:
AngularJS中ng-app的赋值问题_第2张图片

错误显示:
名为hello的模块加载出错,没找到。

找了很久,才发现自己JS代码是写的函数,没有写模块,但是给出了模块名,所以就出现了模块出错问题。

如果不想改JS代码,直接写ng-app即可,不用赋值。
做复用时,不建议这种写法,只用给出模块加controller就好。

改正后效果:
AngularJS中ng-app的赋值问题_第3张图片


当我们使用ng-app指令不给其赋值时,浏览器会默认加载这个为ng应用。

当我们为ng-app赋值时,我们要在js中声明这个模块

问题虽小,还是多实践,避免踩坑。

你可能感兴趣的:(AngularJS)