AngularJS第二篇

来源：互联网发布：淘宝加盟需要多少钱编辑：程序博客网时间：2024/05/22 10:41

学习一下控制器，如果有多个控制器时

<!-- 如下有3个作用域，作用域可以向上查找  -->  <div ng-app="">       <div ng-controller="firstController">           <input type="text" value="" ng-model="name" />           <div ng-controller="secondController">               <input type="text" value="" ng-model="name" />           </div>       </div>  </div>

AJS代码如下：

var firstController = function ($scope) {    $scope.name = '张三';}// 如果这个控制器中没有定义name，那么会向上查找到第一个控制器中的name值并显示var secondController = function ($scope) {    $scope.name = '李四';}

定义模块内和全局的控制器，如下：

<div ng-app="myApp">       <div ng-controller="firstController">           {{ name }}       </div>  </div>

var myApp = angular.module('myApp',[] );myApp.controller('firstController', function ($scope) {    $scope.name = '张三';});// 这是一个全局的controller//function firstController($scope){   //$scope.name = '张三';//}

多个控制器内共享数据，如下：

 <div ng-app="myApp">       <div ng-controller="firstController">           <input type="text" ng-model="data.name" />           <input type="text" ng-model="Data.message" />            first-name:  {{ data.name }} first-message:{{ Data.message }}       </div>      <div ng-controller="secondController">            second-name:  {{ data.name }} second-message:{{ Data.message }}      </div>  </div>

angular.module('myApp',[]).factory('Data', function () {        return {            message:'share date'        };    }).controller('firstController', function ($scope,Data) {        $scope.data = {            name : '张三'        };        $scope.Data = Data;    }).controller('secondController', function ($scope,Data) {        // console.log($scope); 可以用这样的方法打印查看信息        // $scope.name = $scope.$$prevSibling.name ; // 引用原始类型后不会随着第一个元素变化而变化 ，而如果是对象类型时会变化       $scope.Data  = Data;    });

0 0