Appearance
数据绑定
在 Angularjs 应用中,一个模板文件可以引用控制器中的数据与方法。
代码示例:
javascript
// 控制器
angular.module('app', []).controller('CatController', function () {
// 声明数据
$scope.message = 'I am a cat.';
// 声明方法
$scope.onClickSayHelloButton = function () {
console.log('Hello!');
};
});
html
<!-- 模板文件 -->
<div ng-app="app" ng-controller="CatController">
<!-- 使用双括号语法绑定控制器中的数据 -->
<span>{{ message }}</span>
<!-- 使用内置的 ng-bind 指令绑定控制器中的数据 -->
<span ng-bind="message"></span>
<!-- 使用内置的 ng-click 指令绑定控制器中的方法 -->
<button ng-click="onClickSayHelloButton()">Say Hello</button>
</div>
html
<!-- 渲染效果 -->
<div ng-app="app" ng-controller="CatController">
<span>I am a cat.</span>
<span>I am a cat.</span>
</div>