angularjs手记-2016-03-01

最新推荐文章于 2024-08-22 13:54:09 发布

原创最新推荐文章于 2024-08-22 13:54:09 发布 · 609 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

javascript 同时被 3 个专栏收录

10 篇文章

订阅专栏

web

6 篇文章

订阅专栏

html

5 篇文章

订阅专栏

本文详细解析AngularJS中的数据绑定方法，包括ng-bind、$watch、ng-class和ng-style、ng-src和ng-href以及表达式的使用场景，并提供编码建议，帮助开发者优化代码结构。

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">