标签：
一，表达式：
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
</head>
<body>
<h1 ng-init="greeting = ‘Hello World‘">The greeting is: {{ greeting }}</h1>
<script>
angular.module(‘myApp‘, []);
</script>
</body>
</html>
<script src="greeter.js"></script>
二，表达式计算：
<!doctype html>
<html ng-app="myApp">
<head>
<title>Parse Expression Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
<script type="text/javascript">
// open this example and type person.name into the test field
angular.module(‘myApp‘, [])
.controller(‘MyController‘,
[‘$scope‘, ‘$parse‘, function ($scope, $parse) {
$scope.person = {
name: "Ari Lerner"
};
$scope.$watch(‘expr‘, function (newVal, oldVal, scope) {
if (newVal !== oldVal) {
// Let‘s set up our parseFun with the expression
var parseFun = $parse(newVal);
// Get the value of the parsed expression, set it on the scope for output
scope.parsedExpr = parseFun(scope);
}
});
}]);
</script>
</head>
<body>
<div ng-controller="MyController">
<input ng-model="expr"
type="text"
placeholder="Enter an expression"/>
<div>{{ parsedExpr }}</div>
</div>
</body>
</html>
三，插值字符串， template({ to: $scope.to })：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script type="text/javascript">
angular.module(‘myApp‘, [])
.controller(‘MyController‘, function ($scope, $interpolate) {
$scope.to = ‘ari@fullstack.io‘;
$scope.emailBody = ‘Hello {{ to }},\n\nMy name is Ari too!‘;
// Set up a watch
$scope.$watch(‘emailBody‘, function (body) {
if (body) {
var template = $interpolate(body);
$scope.previewText =
template({ to: $scope.to });
}
});
});
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-app="myApp">
<div ng-controller="MyController">
<input ng-model="to"
type="email"
placeholder="Recipient" />
<textarea ng-model="emailBody"></textarea>
<pre>{{ previewText }}</pre>
</div>
</body>
</html>
四，自定义插值服务 ‘emailParser‘：
<!doctype html>
<html ng-app="myApp">
<head>
<title>Interpolate String Template Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js"></script>
<script type="text/javascript">
// to see this example in action open in your browser, type
// an email address into the email field. Then in the text area
// box type: Hello __ to __.
angular.module(‘myApp‘, [‘emailParser‘])
.controller(‘MyController‘,
[‘$scope‘, ‘EmailParser‘,
function ($scope, EmailParser) {
$scope.to = ‘ari@fullstack.io‘;
$scope.emailBody = ‘Hello __to__‘;
// Set up a watch
$scope.$watch(‘emailBody‘, function (body) {
if (body) {
$scope.previewText =
EmailParser.parse(body, {
to: $scope.to
});
}
});
}]);
angular.module(‘emailParser‘, [])
.config([‘$interpolateProvider‘,
function ($interpolateProvider) {
$interpolateProvider.startSymbol(‘__‘);
$interpolateProvider.endSymbol(‘__‘);
}])
.factory(‘EmailParser‘, [‘$interpolate‘,
function ($interpolate) {
// a service to handle parsing
return {
parse: function (text, context) {
var template = $interpolate(text);
return template(context);
}
};
}]);
</script>
</head>
<body>
<div id="emailEditor" ng-controller="MyController">
<input ng-model="to"
type="email"
placeholder="Recipient" />
<textarea ng-model="emailBody"></textarea>
<div id="emailPreview">
<pre>__ previewText __</pre>
</div>
</div>
五，作用域：
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
<style>
#parentCtrl {
background-color: yellow;
padding: 10px;
}
#childCtrl {
background-color: green;
padding: 10px;
}
</style>
</head>
<body>
<p>We can access: {{ rootProperty }}</p>
<div id="parentCtrl" ng-controller="ParentCtrl">
<p>We can access: {{ rootProperty }} and {{ parentProperty }}</p>
<div id="childCtrl" ng-controller="ChildCtrl">
<p>
We can access:
{{ rootProperty }} and
{{ parentProperty }} and
{{ childProperty }}
</p>
<p>{{ fullSentenceFromChild }}</p>
</div>
</div>
<script>
angular.module(‘myApp‘, [])
.run(function ($rootScope) {
// use .run to access $rootScope
$rootScope.rootProperty = ‘root scope‘;
})
.controller(‘ParentCtrl‘, function ($scope) {
// use .controller to access properties inside `ng-controller`
// in the DOM omit $scope, it is inferred based on the current controller
$scope.parentProperty = ‘parent scope‘;
})
.controller(‘ChildCtrl‘, function ($scope) {
$scope.childProperty = ‘child scope‘;
// just like in the DOM, we can access any of the properties in the
// prototype chain directly from the current $scope
$scope.fullSentenceFromChild = ‘Same $scope: We can access: ‘ +
$scope.rootProperty + ‘ and ‘ +
$scope.parentProperty + ‘ and ‘ +
$scope.childProperty
});
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/ByronWu12345/p/4812608.html
