Angular一些深入指令学习

一丶页面中的指令

  1.ng-if=“” 指令 可根据true或者false来决定显示不现实该标签体内容

  2.ng-repeat 当循环的集合中的元素为map对象时,应当书写为 (key,value)  in “angular变量集合名”

  3.ng-true-value="1" ng-false-value="0" 一般用于复选框,选中值为1否则为0 ,搭配ng-model=“”使用,可将其复制0或1

  4.ng-options=“item.id as item.name for item in list”性可以在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似,很多时候可以用ng-repeat来代替ng-options。
    但是ng-options提供了一些好处,例如减少内存提高速度,以及提供选择框的选项来让用户选择。 一般用于select中

  5.ng-bind-html指令用于显示html内容  例如:<div class="attr" ng-bind-html="item.title | trustHtml"></div> ,搭配$sce服务,写出的过滤器trustHtml进行使用

  6. ng-checked=“” 指令控制复选框的勾选状态 可根据调用方法的返回值true或false控制勾选状态

二丶一些服务的引用

  1. $watch 方法用于监控某个变量的值,当被监控的值发生变化,就自动执行相应的函数,例如:

$scope.$watch('entity.goods.category1Id', function(newValue, oldValue) {
//根据选择的值,查询二级分类
itemCatService.findByParentId(newValue).success(
function(response){
$scope.itemCat2List=response; 

2.$sce服务 高亮显示的html代码原样输出,这是angularJS为了防止html攻击采取的安全机制。如何在页面上显示html的结果呢?我们会用到$sce服务的trustAsHtml方法来实现转换。

    因为这个功能具有一定通用性,我们可以通过angularJS的过滤器来简化开发,这样只写一次,调用的时候就非常方便了。例如:

var app = angular.module("pinyougou",[]);
/*$sce服务写成过滤器*/
  app.filter('trustHtml',['$sce',function($sce){
  return function(data){
  return $sce.trustAsHtml(data);
}
}]);

之后结合ng-band-html=“现实的内容| 过滤器名称”指令使用,这样html在后台写的渲染语言就可以在页面展示出来了。

3.delete的使用

  当angular对象为集合且集合内部为键值对数据,map;当要删除对应的一个键值对时,使用特有的方法 delete $scope.变量名[key]

  4. .$location服务 用来获取参数 $location.search()["此处为参数key"] ,可获取到get方式传递的参数


  5. angularjs中使用get方式跳转页面时应该在?之前加#号?前要加# ,则是angularJS的地址路由的书写形式

猜你喜欢

转载自www.cnblogs.com/hanpi/p/12015045.html
今日推荐