Skip to content

数据绑定

在 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>