1、ng-bind
<p ng-bind="greeting"></p>
<p>{{greeting}}</p>
上面两种方式是等价的,
区别:
前者在数据还没有加载完成时用户是看不到的,
后者用户可以看到{{greeting}}
2、$watch
当一个值的变更需要改变另外一个值的时候,使用$watch
<input type="text" ng-model="input">
<input type="text" ng-model="input1">
$scope.$watch("input",function(){
$scope.input1 = $scope.input*100;
});
当input变更时改变input1
3、ng-class 和 ng-style
根据不同的条件使用不同的class或style
<li ng-repeat="p in ps" ng-class="{'alert-info':$first}" >{{p}}</li>//第一个li使用alert-info的class
另一种方式 这种方式不直观 要结合js和html代码看 才知道使用了哪个样式 改起来也不方便,需要改js和html
<li class='menu-disabled-{{isDisabled}}' >Stun</li>
4、ng-src和ng-href
当数据绑定到一个<img>或<a>标签时,在 src 或者 href 中使用{{}}的路径不能够正常运行。因为对于其他内容,浏览器是并行加载图片的,Angular 没有机会拦截数据绑定的请求。
用于替换src和href。
<img ng-src="http://img.woyaogexing.com{{imgUrl}}">//如果不替换图片加载不出来
<a ng-href="/shop/category={{numberOfBalloons}}">some text</a>//如果不用ng-href,angular还没运行到这里的时候是会跳到/shop/category={{numberOfBalloons}}的。
但对于src 或者 href中没有变量,则不影响。
5、表达式
可以做简单的运算(+,-,/,*,%),做比较(==,!=,>,<,>=,<=),执行布尔逻辑(&&,||,!)和位运算(\^,&,|)。你可以调用控制器中暴露出的函数,可以引用数组和对象符号([],{},.)
<div ng-controller='SomeController'>
<div>{{recompute() / 10}}</div>
<ul ng-repeat='thing in things'>
<li ng-class='{highlight: $index % 4 >= threshold(test[0])}'>
{{otherFunction($index)}}
</li>
</ul>
</div>
</div>
6、编码建议
为了保持控制器最小化和可管理,我们的建议是,为视图中的每个功能域创建一个控制器。那就是说,如果有一个菜单,就建立一个 MenuController。如果你有一个导航条,那么就写一个 BreadcrumbController 等等
7、按钮只能点击一次
//点击后把canUse设置为true
<button ng-click="canUse='true'" ng-disabled="canUse">