• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > AngularJS语法详解(续)

AngularJS语法详解(续)

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含AngularJS语法详解(续)等相关知识,希望在学习及工作中可以帮助到您

src和href属性

Angularjs中src应写成ng-src,href应写成ng-href 例如:

<img ng-src="/images/cats/{{favoriteCat}}">
<a ng-href="/shop/category={{number}}">Some text</a>
</div>

表达式

在模板中可以进行简单的数学运算、比较运算、布尔运算、位运算、引用数组、和对象符号等 尽管我们可以使用表达式做很多事情,但是表达式是使用一个自定义的解释器来执行的(Angular的一部分),而不是用Javascript得eval()函数执行的,所以局限性较大。
虽然很多方面这里的表达式比Javascript更严格,但是他们对undefined和null的容错性更好,如果遇到错误,模板只是简单的什么都不显示,而不会抛出一个NullPointerException错误。 例如:

<div ng-controller='SomeController'>
    <div>{{computer() /10 }}</div> //虽然是合法的,但是它把业务逻辑放到模板中了,应避免这种做法
</div>
</div>

区分UI和控制器的职责

控制器是绑定在特定DOM片段上的,这些片段就是他们需要负责管理的内容。有两种主要的方法可以把控制器关联到DOM节点上,一种在模板中通过ng-controller声明,第二种是通过路由把它绑定到一个动态加载的DOM模板片段上,这个模板叫视图。 我们可以创建嵌套的控制器,他们可以通过继承数结构来共享数据模型和函数,真实的嵌套发生在$scope对象上,通过内部的原始继承机制,父控制器对象的$scope会被传递到内部嵌套的$scope(所有属性,包括函数)。例如:

<div ng-controller="ParentController">
    <div ng-controller="ChildController">...</div>
</div>
</div>

利用$scope暴漏模型数据

可以显示创建$scope属性,例如$scope.count = 5。还可以间接的通过模板自身创建数据模型。

通过表达式。例如

<button ng-click='count=3'>Set count to three</button>
</div>

在表单项上使用ng-model

与表达式类似,ng-model上指定的模型参数同样工作在外层控制器内。唯一的不同点在于,这样会在表单项和指定的模型之间建立双向绑定关系。

使用watch监控数据模型的变化

$watch的函数签名是: $watch(watchFn,watchAction,deepWatch)
watchFn是一个带有Angular表达式或者函数的字符串,它会返回被监控的数据模型的当前值。 watchAction是一个函数或者表达式,当watchFn发生变化时调用。其函数签名为:
function(newValue,oldValue,scope) deepWatch 如果设置为true,这个可选的布尔值参数将会命令Angular去检查被监控对象的每一个属性是否发生了变化。如果你向监控数组中的元素,或者对象上的所有属性,而不是值监控一个简单的值,你就可以使用这个参数。注意,Angular需要遍历数组或者对象,如果集合比较大,那么运算复杂呢就会比较的重。

$watch函数会返回一个函数,当你不需要接收变更通知时,可以用这个返回的函数注销监控器。
如果我们需要监控一个属性,然后接着注销监控,我们就可以使用以下的代码: var dereg = $scope.$watch('someModel.someProperty',callbackOnChange());
... dereg();

实例代码如下:

<html ng-app>
<head>
    <title>Your Shopping Cart</title>
    <script type="text/javascript">
        function CartController($scope) {
            $scope.bill = {};
            $scope.items = [
                {title:'Paint pots',quantity:8,price:3.95},
                {title:'Polka dots',quantity:17,price:12.95},
                {title:'Pebbles',quantity:5,price:6.95}
            ];
            $scope.totalCart = function() {
                var total = 0;
                for (var i=0,len=$scope.items.length;i<len;i++) {
                    total = total + $scope.items[i].price * $scope.items[i].quantity;
                }
                return total;
            }
            $scope.subtotal = function() {
                return $scope.totalCart() - $scope.bill.discount;
            }
            function calculateDiscount(newValue,oldValue,scope) {
                $scope.bill.discount = newValue > 100 ? 10 : 0;
            }//这里的watchAction函数
            $scope.$watch($scope.totalCart,calculateDiscount);//这里的watch函数
        }
    </script>
</head>
<body>
    <div ng-controller="CartController">
        <div ng-repeat='item in items'>
            <span>{{item.title}}</span>
            <input ng-model='item.quantity'>
            <span>{{item.price | currency}}</span>
            <span>{{item.price * item.quantity | currency}}</span>
        </div>
        <div>Total: {{totalCart()| currency }}</div>
        <div>Discount: {{bill.discount | currency}}</div>
        <div>SubTotal: {{subtotal() | currency}}</div>
    </div>
    <script type="text/javascript" src="a

您可能想查找下面的文章:

相关文章

  • 2017-05-30Angularjs的ng-repeat中去除重复数据的方法
  • 2017-05-30angularjs指令中的compile与link函数详解
  • 2017-05-30Angular的$http的ajax的请求操作(推荐)
  • 2017-05-30AngularJs中route的使用方法和配置
  • 2017-05-30浅析angularJS中的ui-router和ng-grid模块
  • 2017-05-30用angular实现多选按钮的全选与反选实例代码
  • 2017-05-30使用AngularJS对路由进行安全性处理的方法
  • 2017-05-30详解angularJs模块ui-router之状态嵌套和视图嵌套
  • 2017-05-30详解JavaScript的AngularJS框架中的表达式与指令
  • 2017-05-30AngularJS中$interval的用法详解

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • AngularJS 过滤器的简单实例
    • AngularJS入门教程之Cookies读写操作示例
    • angularjs实现的前端分页控件示例
    • 利用Angular+Angular-Ui实现分页(代码加简单)
    • angularJS 中$scope方法使用指南
    • Angular2 NgModule 模块详解
    • indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
    • AngularJS基础知识笔记之过滤器
    • AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
    • AngularJS表格详解及示例代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有