定时器$timeout
{{clock.now | date: 'MM/dd/yyyy @ h:mm:ss a'}}
<![CDATA[
<div ng-controller="ClockController">
<span> { { clock.now | date: 'MM/dd/yyyy @ h:mm:ssa' }}</span>
</div>
<script type="text/javascript" charset="utf-8">
angular.module('angularLearning', []).controller('ClockController', ['$timeout', '$scope', function($timeout, $scope) {
var updateTime = function() {
$scope.clock = {
now: new Date()
};
$timeout(function() {
updateTime();
}, 1000);
}
updateTime();
}])
</script>
]]>
表达式
解析表达式$parse
<![CDATA[
<div ng-controller="parseController">
<div>person -> { {person}}</div>
<input ng-model="expr" type="text" placeholder="输入一个表达式"/>
<h2>{ { parseValue }}</h2>
</div>
<script>
angular.module("angularLearning")
.controller('parseController', ['$scope', '$parse', function($scope, $parse) {
$scope.person = {
name: 'cuitianze'
};
$scope.$watch('expr', function(newVal, oldVal, scope) {
if(newVal !== oldVal) {
// 解析表达式
var parseFun = $parse(newVal);
// 赋给另一个值
$scope.parseValue = parseFun(scope);
}
});
}]);
</script>
]]>
插值字符串$interpolate
<![CDATA[
<div ng-controller="interpolateController">
<input ng-model="to" type="email" placeholder="邮件地址"/>
<textarea ng-model="emailBody"></textarea>
<pre>{ { previewText }}</pre>
</div>
<script>
angular.module('angularLearning')
.controller('interpolateController', ['$scope', '$interpolate', function($scope, $interpolate) {
$scope.to = "cuitianze@dachuwang.com";
$scope.emailBody = "Hello { { to }}, Welcome to Angular World";
$scope.$watch('emailBody', function(body) {
if (body) {
var template = $interpolate(body);
$scope.previewText = template({ to: $scope.to });
}
})
}]);
</script>
]]>
$interpolateProvider服务修改标示符
用startSymbol()方法,endSymbol()方法可以修改标识开始和结束的符号
如果要修改这两个符号的设置,需要在创建新模块时将$interpolateProvider注入进去。
这里还费了点劲儿折腾呢，因为$interpolateProvider服务的上述修改会把模块内的表达式开始和结束符合通通设置成__。导致全局代码无法运行。
我一开始想的这地方单独开一个页面吧，后来又一想有没有更好的方式呢。于是我就新建了一个模块，但上面的笔记都完好，也就是只有这个模块没有被加载进来。
然后发现只有第一个ng-app会被angular加载，其他的只能手动启动
过滤器
自定义过滤器
{{ 'ginUer lovers dog treats' | lowercase | capitalize }}
<![CDATA[
<div>
{ { 'ginUer lovers dog treats' | lowercase | capitalize }}
</div>
<script>
angular.module('angularLearning')
.filter('capitalize', function() {
return function(input) {
if(input) {
return input[0].toUpperCase() + input.slice(1);
}
}
})
</script>
]]>