zoukankan      html  css  js  c++  java
  • Angular JS 学习之 Scope作用域

    1.Scope作用域是应用在HTML(视图)和JavaScript(控制器)之间的纽带;

    Scope是一个对象,有可用的方法和属性;

    Scope可应用在视图和控制器上;

    2.当你在AngularJS中创建控制器时,你可以将$scope对象作为一个参数传递;

    <div ng-app="" ng-controller="myCtrl">

    <h1>{{carname}}</h1>

    </div>

    <script>

    var app=angular.module('myApp',[]);

    app.controller('myCtrl',function($scope){

      $scope.carname="Volvo";           //控制器中创建一个属性名 "carname",对应了视图中使用 {{ }} 中的名称。

    });

    </script>

    3.Scope概述:

    **AngularJS应用组成如下:

    (1)View(视图),即HTML;

    (2)Model(模型),当前视图中可用的数据;

    (3)Controller(控制器),即JavaScript函数,可以添加或修改属性;

    **scope是模型,是一个javaScript对象,带有属性和方法,这些属性和方法可以在视图中和控制器中使用;

    4.Scope作用范围:

    <div ng-app="" ng-controller="myCtrl">

    <ul>

      <li ng-repeat="x in name">{{x}}</li>

    </ul>

    </div>

    <script>

    var app=angular.module('myApp',[]);

    app.controller('myCtrl',function($scope){

      $scope.name=['Emil','Tobias','Linus'];

    });

    </script>

    5.根作用域:所有的应用都有一个$rootScope,它可以作用在ng-app指令包含的所有HTML元素中;

    $rootScope可作用于整个应用中,是各个controller中scope的桥梁,用rootscope定义的值,可以在各个controller中使用;

    <div ng-app="' ng-controller="myCtrl">

    <h1>{{lastname}}家族成员:</h1>

    <ul>

      <li ng-repeat="x in names">{{x}} {{lastname}}</li>

    </ul>

    </div>

    <script>

    var app=angular.module('myApp',[]);

    app.controller('myCtrl',function($scope,$rootScope){

      $scope.names=["Emil","Tobias","Linus"];

      $rootscope.lastname="Refsnes";

    });

    </script>

  • 相关阅读:
    Shell学习笔记 ——第一天
    Myclipse 安装 Maven遇见的N个异常
    Myeclipse 创建 Web Maven项目
    Guava API
    String 转Map(基于Guava类库)
    Mybatis——helloWorld级程序
    redis
    listener、context、filter、servlet及其加载顺序
    junit 单元测试
    hibernate —— 树状存储
  • 原文地址:https://www.cnblogs.com/hqutcy/p/6063748.html
Copyright © 2011-2022 走看看