src和href属性
Angularjs中src应写成ng-src,href应写成ng-href 例如:
表达式
在模板中可以进行简单的数学运算、比较运算、布尔运算、位运算、引用数组、和对象符号等 尽管我们可以使用表达式做很多事情,但是表达式是使用一个自定义的解释器来执行的(Angular的一部分),而不是用Javascript得eval()函数执行的,所以局限性较大。
虽然很多方面这里的表达式比Javascript更严格,但是他们对undefined和null的容错性更好,如果遇到错误,模板只是简单的什么都不显示,而不会抛出一个NullPointerException错误。 例如:
{{computer() /10 }}
//虽然是合法的,但是它把业务逻辑放到模板中了,应避免这种做法
区分UI和控制器的职责
控制器是绑定在特定DOM片段上的,这些片段就是他们需要负责管理的内容。有两种主要的方法可以把控制器关联到DOM节点上,一种在模板中通过ng-controller声明,第二种是通过路由把它绑定到一个动态加载的DOM模板片段上,这个模板叫视图。 我们可以创建嵌套的控制器,他们可以通过继承数结构来共享数据模型和函数,真实的嵌套发生在$scope对象上,通过内部的原始继承机制,父控制器对象的$scope会被传递到内部嵌套的$scope(所有属性,包括函数)。例如:
利用$scope暴漏模型数据
可以显示创建$scope属性,例如$scope.count = 5。还可以间接的通过模板自身创建数据模型。
通过表达式。例如
在表单项上使用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();
实例代码如下:
您的购物车标题>
函数 CartController($scope) {
$scope.bill = {};
$scope.items = [
{标题:'油漆盆',数量:8,价格:3.95},
{标题:'圆点',数量:17,价格:12.95},
{标题:'鹅卵石',数量:5,价格:6.95}
];
$scope.totalCart = function() {
var 总计 = 0;
for (var i=0,len=$scope.items.length;i
总计 = 总计 $scope.items[i].price * $scope.items[i].quantity;
}
返回总计;
}
$scope.subtotal = function() {
返回 $scope.totalCart() - $scope.bill.discount;
}
函数calculateDiscount(newValue,oldValue,scope) {
$scope.bill.discount = newValue > 100? 10 : 0;
}//这里的watchAction函数
$scope.$watch($scope.totalCart,calculateDiscount);//这里的watch函数
}
脚本>
头>
{{item.title}}
<跨度>{{item.price |货币}}
{{商品.价格 * 商品.数量 |货币}}
总计:{{totalCart()|货币 }}
折扣:{{bill.discount |货币}}
小计:{{小计() |货币}}
<脚本类型=“text/javascript”src=“angular.min.js”>脚本>
身体>
上面的watch存在性能问题,calculateTotals函数执行了6次,其中三次是因为循坏,每次循环,都会重新渲染数据。
下面是改进后的代码
您的购物车标题>
函数 CartController($scope) {
$scope.bill = {};
$scope.items = [
{标题:'油漆盆',数量:8,价格:3.95},
{标题:'圆点',数量:17,价格:12.95},
{标题:'鹅卵石',数量:5,价格:6.95}
];
var TotalCart = function() {
var 总计 = 0;
for (var i=0,len=$scope.items.length;i
总计 = 总计 $scope.items[i].price * $scope.items[i].quantity;
}
$scope.bill.totalcart = 总计;
$scope.bill.discount = 总计 > 100? 10:0;
$scope.bill.subtotal = 总计 - $scope.bill.discount;
}
$scope.$watch('items',totalCart,true);//只用watch着items的变化
}
脚本>
头>
{{item.title}}
<跨度>{{item.price |货币}}
{{商品.价格 * 商品.数量 |货币}}
总计:{{bill.totalcart|货币 }}
折扣:{{bill.discount |货币}}
小计:{{bill.subtotal |货币}}
<脚本类型=“text/javascript”src=“angular.min.js”>脚本>
身体>