插值表达式
双大括号{{}}中可以放多种表达式，先准备一些演示数据
var app = angular.module('demo.main', []); app.controller('nameController', function ($scope) { $scope.num = 1; $scope.fn = function () { console.log('函数执行了'); return 'run'; }; $scope.data = { num: 1, str: 'hello world', arr:[1,2,3,4,5] }; });
- 取值：{{data.name}}
- 取函数：{{fn}}
- 取对象：{{data}}
- 运算表达式：{{num + 2}}
- 函数执行：{{fn()}}
<div ng-controller="nameController"> <div> 取值表达式：{{data.num}} <br> 取函数：{{fn}} <br> 取对象：{{data}} </div> <div> 运算表达式：{{num + 2}} </div> <div> 函数执行：{{fn()}} </div> </div>
控制器的作用域
数据依附于控制器，控制器可相互嵌套。当发生嵌套时数据获取类似于JavaScript的作用域链，若本身存在该数据则使用本身的，若本身没有则逐级往上获取直至为空。
<body ng-app="demo.main"> <div ng-controller="outerController"> <div ng-controller="innerController"> 访问本级作用域：{{num}} <br/> 访问上一级作用域：{{name}}<br/> 无内容：{{data}} </div> </div> <script> var app = angular.module('demo.main', []); app.controller('outerController', function ($scope) { $scope.num = 1; $scope.name = 'outer'; }); app.controller('innerController',function($scope){ $scope.num = 2; }) </script>
$apply方法
在Angular中，当使用Angular的方法修改数据时，页面上相应的数据会被更新。当使用其他方式修改时虽然数据改变了但是页面上的值并没有更新。此时需要调用$apply方法来提醒Angular来更新一次界面。
var app = angular.module('demo.main', []); app.controller('outerController', function ($scope) { $scope.num = 0; setTimeout(function(){ //使用非Angular提供的方式修改数据时界面上的数据并不会被更新 $scope.num = 1; //调用apply方法通知Angular更新页面上的数据 $scope.$apply(); },1000); });
数据监视
使用$watch方法监视某个数据。该方法返回一个函数，调用返回的函数可以解除监听。
var app = angular.module('demo.main', []); app.controller('outerController', function ($scope) { $scope.num = 0; //每隔一秒使用非Angular提供的方式修改一次数据 //此时$watch无法监听到数据的改变，调用$apply通知$watch setInterval(function(){ $scope.num ++; //不调用$apply时$watch无法监听到数据的改变 $scope.$apply(); },1000); var releaseFn = $scope.$watch('num', function (newValue, oldValue, scope) { console.log(newValue, oldValue); }); // 3秒后释放自己注册的watcher setTimeout(releaseFn,3000); });
内部路由
Angular利用锚链接不会刷新界面的特性，提供了$location使得能实现单页面路由的功能。调用$location.path()返回当前的锚链接地址。
<body ng-app="demo.main"> <div ng-controller="mainController"> <a href="#/a">goto a</a> <!-- 需要注意的是"#b"和"#/b"一样 --> <!-- 此时没有"/"，但是Angular会自动添加"/" --> <a href="#b">goto b</a> <a href="#/c">goto c</a> 此时路由至：{{path}} </div> </body> <script> var app = angular.module("demo.main",[]); app.controller("mainController",function($scope,$location){ //将$location挂在在$scope上 $scope.location = $location; //监听location.path()方法的返回值 $scope.$watch('location.path()', function (nValue, oValue, scope) { //更新path为新的锚链接地址 $scope.path = nValue; }) }); </script>