zoukankan      html  css  js  c++  java
  • Angular(作用域层次结构)

    html部分
    .........................................................................................
    <!doctype html>
    <html ng-app="myApp">
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <div ng-controller="LevelA">
    <h3>{{title}}</h3>
    ValueA = {{valueA}} <input type="button" ng-click="inc()" value="+" />
    <div ng-controller="LevelB"><hr>
    <h3>{{title}}</h3>
    ValueA = {{valueA}}<br>
    ValueB = {{valueB}}
    <input type="button" ng-click="inc()" value="+" />
    <div ng-controller="LevelC"><hr>
    <h3>{{title}}</h3>
    ValueA = {{valueA}}<br>
    ValueB = {{valueB}}<br>
    ValueC = {{valueC}}
    <input type="button" ng-click="inc()" value="+" />
    </div>
    </div>
    </div>
    <script src="js/angular-1.3.0.js"></script>
    <script src="js/作业3_作用域继承.js"></script>
    </body>
    </html>
    ...........................................................................
    js部分
    myApp=angular.module("myApp",[]);
    myApp.controller("LevelA",function ($scope,$rootScope) {
    $scope.valueA=0; //初始化
    $scope.valueB=0; //初始化
    $scope.valueC=0; //初始化
    $scope.title="LevelA";

    $scope.inc=function () {
    $scope.valueA++;
    $rootScope.valueB++;
    $rootScope.valueC++;
    }
    })
    myApp.controller("LevelB",function ($scope,$rootScope) {
    $scope.title="LevelB";
    $scope.inc=function () {
    $scope.valueB++;
    $rootScope.valueC++;
    }
    })
    myApp.controller("LevelC",function ($scope) {
    $scope.title="LevelC";
    $scope.inc=function () {
    $scope.valueC++;
    }

    })




  • 相关阅读:
    XML 2—— XML文档的元素、属性、实体
    XML 1—— 概述
    Eclipse文件 常用快捷键
    JDBC 7—— PreparedStatement优势
    JDBC 6—— 针对不同表的通用查询操作
    JDBC 5—— 查的操作
    模板复习题目
    第四次博客作业
    oo第三次博客作业
    oo第二次博客作业
  • 原文地址:https://www.cnblogs.com/YoogaChan/p/6918320.html
Copyright © 2011-2022 走看看