• 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>

  • 相关阅读:
    element-ui Notification重叠问题,原因及解决办法
    详解CSS3实现无限循环的无缝滚动
    js监听浏览器离开页面操作
    判断浏览器
    轮播动效 | 环形进度条 -- 等 动效库
    拓扑插件搜集
    jquery-图片懒加载
    [原]开源的视频转换器,支持gpu,绝对好用ffmpeg的GUI==》dmMediaConverter最新版本2.3
    【原】font-awesome IE6支持代码本人测试成功
    【原创】 c#单文件绿色资源自更新
  • 原文地址:https://www.cnblogs.com/hqutcy/p/6063748.html
Copyright © 2020-2023  润新知