ホームページ > 記事 > ウェブフロントエンド > AngularJS コントローラーのスコープ
$scope はビューとデータ モデル間の中間ブリッジを表します。スコープ ドメイン内のオブジェクトはモデルとビューの両方で共有でき、データは双方向に同期されます。コントローラーのスコープは主に要素のデータ処理を担当します。子要素が埋め込まれている場合、Controller を設定すると、対応するサブ要素のコントローラーがそのサブ要素に最も近いものになります (この最も近い関数の原則は、Jmeter テスト フレームワークにも反映されます)。と avalon の ms-controller)
HTML テキスト:
<!-- 指定应用名及控制器 --> <body ng-app="myApp"> <div ng-controller="myCtrl01"> <p>myCtrl01的作用域</p> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{firstName + " " + lastName}} <hr/> <p>myCtrl02的作用域</p> <div ng-controller="myCtrl02"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{firstName + " " + lastName}} </div> </div>
Javascript オペレーション コード:
//定义应用的控制器,负责具体数据处理: //定义angular应用的名称:myApp:一个html中只有一个应用,如果存在多个以第一个为准 var app = angular.module('myApp', []); app.controller('myCtrl01', function($scope) { /* 后台向scope域中存放对象:页面存放的标签: * ng-init 初始化变量 * ng-model:初始化变量并进行数绑定 */ $scope.firstName= "John"; $scope.lastName= "Doe"; }); app.controller('myCtrl02', function($scope) { $scope.firstName= "Hello"; $scope.lastName= "Python"; });
効果:
以上がこの記事の全内容になると思います。皆さんの学習に役立つとともに、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。
AngularJS コントローラー スコープに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。