AngularJS实例,Angular,AngularJS 在线

715AngularJS Scope(作用域)

实例

<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
<body ng-app="myApp" >
    <div ng-controller="myCtrl">
        在控制器中使用scope：{{ name }}<br/>
        在控制器中使用rootScope：{{ nameall }}<br/>
        在控制器中使用scope按钮事件：
        <input type="button" value="scope点击事件" ng-click="sayHello()"/>
    </div>
    不在控制器中使用scope：{{ name }}<br/>
    不在控制器中使用rootScope：{{ nameall }}<br/>
    不在控制器中使用scope按钮事件：
    <input type="button" value="scope点击事件" ng-click="sayHello()"/>
</body>

尝试一下 »

714AngularJS Scope(作用域)

1、不同的控制器域内可以有同名的变量。但除非必要，否则不建议这么做，自己都会乱掉。

2、后面控制器中定义的rootScope变量，在它前面的控制器中访问不到。

function myCtrl($scope,$rootScope){

  $scope.myf = 1;
  $rootScope.allf = '全局1';
  alert($rootScope.alls);  // 访问不到，未定义
} 

function myCtrl2($scope,$rootScope){
  $scope.mys = 2;
  $rootScope.alls = '全局2';
  alert($rootScope.allf);  // 可以访问
  alert($rootScope.alls);  // 可以访问
}

713AngularJS Scope(作用域)

$rootScope 全局对象的属性可在所有子作用域中访问，子作用域互相无法访问对方的私有变量，这一点与js的函数作用域完全一致。

var app = angular.module('myApp',[]);
// 两个控制器
app.controller('myCtrl', ['$scope', '$rootScope',myCtrl]);
app.controller('myCtrl2', ['$scope','$rootScope', myCtrl2]);

function myCtrl($scope,$rootScope){
  $scope.myf = 1;
  $rootScope.allf = '全局1';
} 

function myCtrl2($scope,$rootScope){
  $scope.mys = 2;
  $rootScope.alls = '全局2';
}

尝试一下 »

712AngularJS Scope(作用域)

$rootscope设置的变量在所有controller里面都是可以直接用{{$root.变量名}}来显示的，当然也可以赋值给$scope.

<div ng-app="myApp">
<div ng-controller="myCtrl">
  <h1>姓氏为 {{lastname}} 家族成员:</h1>
  <ul>
      <li ng-repeat="x in names">{{x}} {{lastname}}</li>
  </ul>
</div>
<div ng-controller="myCtrl_1">
  <div>scope中的值是{{lastname_1}}</div>
  <div>rootscope中的值是{{$root.lastname}}</div>
</div>
</div>

尝试一下 »

711AngularJS 模型

$valid （class：ng-valid）： Boolean 表单按照规则是否验证通过，True 是通过。

$invalid （class：ng-invalid）：Boolean 表单按照规则是否验证不通过，True 是不通过。

$pristine （class：ng-pristine）：Boolean 表单是否没有使用，True 为没有被使用。

$dirty （class：ng-dirty）：Boolean 表单是否使用，True 为使用过。