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>

  • 相关阅读:
    AODV路由协议的路由缓存队列详解
    NS各种常用资料(转)
    Zigbee之旅(二):第一个CC2430程序——LED灯闪烁实验(转)
    计算机核心期刊一览【转】
    NS2中能量模型的添加
    Zigbee之旅(一):开天辟地(转)
    NS2能量模型
    Zigbee之旅(三):几个重要的CC2430基础实验——外部中断(转)
    如何画MDI主窗体的背景
    Speed up the display of Delphi list components
  • 原文地址:https://www.cnblogs.com/hqutcy/p/6063748.html
Copyright © 2011-2022 走看看