zoukankan      html  css  js  c++  java
  • AngularJS Scope (作用域)

    Scope (作用域)是应用在html(视图)和javascript(控制器之间的纽带)

    scope 是一个对象,有可用的方法和属性,可应用在视图和控制器中

    当在控制器中添加 $scope 对象时,视图 (HTML) 可以获取了这些属性。

    视图中,你不需要添加 $scope 前缀, 只需要添加属性名即可,如: {{carname}}

    <body>

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

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

    </div>

    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.carname = "Volvo";
    });
    </script>
    <p>控制器中创建一个属性名 "carname",对应了视图中使用 {{ }} 中的名称。</p> 


     Scope 概述

     

    AngularJS 应用组成如下:

    • View(视图), 即 HTML。
    • Model(模型), 当前视图中可用的数据。
    • Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。

    scope 是模型。

    scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。

     module使用时必须首先定义一个模块module

    var app = angular.module('myApp', []);
    <div ng-app="myApp" ng-controller="myCtrl">

    <input ng-model="name">

    <h1>我的名字是 {{name}}</h1>

    </div>

    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.name = "John Doe";
    });
    </script>
    <p>当你修改输入框中的值时,会影响到模型(model),当然也会影响到控制器对应的属性值。</p> 

    scope 作用范围

     只有一个作用域 scope,所以处理起来比较简单,但在大型项目中, HTML DOM 中有多个作用域,这时你就需要知道你使用的 scope 对应的作用域是哪一个。

    <div ng-app="myApp" ng-controller="myCtrl">
    <ul>
        <li ng-repeat="x in names">{{x}}
    </ul>

    </div>

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

    app.controller('myCtrl', function($scope) {
        $scope.names = ["Emil""Tobias""Linus"];
    });
    </script>

    根作用域: 

     所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。

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

     创建控制器时,将 $rootScope 作为参数传递,可在应用中使用:

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


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

    <ul>
    //{{x}} {{lastname}} 遍历循环显示 姓氏
        <li ng-repeat="x in names">{{x}} {{lastname}}
    </ul>

    </div>

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

    app.controller('myCtrl', function($scope, $rootScope) {
        $scope.names = ["Emil""Tobias""Linus"];
        $rootScope.lastname = "Refsnes";
    });
    </script>

    <p>注意 $rootScope 在循环对象内外都可以访问。</p>
  • 相关阅读:
    通过filebeat收集并通过elsaticsearch的pipeline功能解析nginx访问日志
    markdown blog Typora+minio+upic图床改造
    spark 使用shc 访问hbase超时问题解决办法
    定制logstash-output-kafka 添加额外事务参数
    《机器学习十讲》第八讲总结
    寒假学习日报(二十四)
    《机器学习十讲》第七讲总结
    寒假学习日报(二十三)
    《机器学习十讲》第六讲总结
    寒假学习日报(二十二)
  • 原文地址:https://www.cnblogs.com/cf924823/p/5230159.html
Copyright © 2011-2022 走看看