AngularJS学习笔记五

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

当数据模型中的某一部分改变时,$watch函数可以向出通知。我们可以控制单个对象的属性,也可以监控函数。

它的函数签名为

$watch(watchFn,watchAction,deepWatch);

每个参数的详细含义:

watchFn:

该参数是一个带有Angular表达式或者函数的字符串,

watchAction:

这是一个函数或者表达式,当watchFn发生改变时会被调用,如果是函数形式他会接受到watchFn的新旧两个值,以及作用于对象的引用。

其函数签名是function(newValue,oldValue,scope)。

deepWatch:

如果设置为true,这个可选的布尔型参数将会命令Angular去检查被监控对象的每个属性是否发生变化,如果要监数组中的元素,或者对象上的所有属性,

而不是监视一个简单的值,就可以用这个参数。由于Angular会遍历数组或者对象,如果集合比较大,那么远算负担就会比较重。

$watch函数会返回一个函数,当我们不再需要接受变更通知时,可以利用这个返回函数注销监视器。

var dereg=$scope.$watch(……………..);

dereg();

使用过滤器格式化数据

我们可以用过滤器来声明应该如何变换数据格式,然后在显示给用户,只要在模板中使用一个插值变量即可。

使用过滤器语法:

{{expression | filterName : parameter1 :……parameterN}}

这里的表达式可以使任意的Angular表达式,filterName是我们需要使用的过滤器名称,过滤器的多个参数之间使用冒号分隔。

Angular内置了很多过滤器,比如:

{{12.9 | currency }}

上面的代码将会显示如下结果:

$12.9

其他的过滤器还有date,number,uppercase等。

我们也可以同时运用多个过滤器:

{{12.9 | currency | number:0}}

将会显示:

$13

numbe过滤器会把数值作为参数传递给round函数。

我们也可以自己编写过滤器。

   1:  <!DOCTYPE html>
   2:  <html ng-app="test">
   3:  <head lang="en">
   4:      <meta charset="UTF-8">
   5:      <title></title>
   6:  </head>
   7:  <body>
   8:  {{12|testFilter}}
   9:  <script src="angular.min.js"></script>
  10:  <script>
  11:      var testModule=angular.module("test",[]);
  12:      testModule.filter("testFilter",function(){
  13:          return function(input){
  14:              return input+"filter";
  15:          }
  16:      })
  17:  </script>
  18:  </body>
  19:  </html>

会显示:12filter。

使用路由和$location切换视图

 

   1:  var someModule=angular.module("someModule",[....module dependencies......]);
   2:  someModule.config(function($routeProvider){
   3:       $routeProvider.
   4:            when('url',{controller:aController,templateUrl:'/path/to/tempate'}).
   5:            when('other mappings for your app'})
   6:            ..........
   7:            otherwise(.....what to do  if nothing else matches.....)
   8:  });

当浏览器中的URL编成指定的值时,Angular将会加载/path/to/template路径下的模板,然后把这个模板中的根元素关联到aController上

最后一行的otherwise()调用告诉路由没有可匹配的任何东西是跳到哪里。

ng-view 指令可以告诉Angular把视图放在哪儿。

原文地址:https://www.cnblogs.com/zsplove/p/3659666.html