AngularJS笔记---作用域和控制器

AngularJS笔记---作用域和控制器

编程入门hacker2017-01-18 8:18:208612A+A-

什么叫作用域. 什么叫控制板, 作用域包括了3D渲染主视图时需要的作用和统计数据,这是全部主视图的惟一根源。能够将作用域了解成视图实体模型(ViewModel). 作用域中间能够是包括关联还可以是单独关联.能够根据设定不一样的ng-Controller来让$scope处在不一样的作用域下边。

一.$rootScope

1.1 rootScope能够了解成全局变量,如果赋值对全部module都合理. rootScpoe不取决于一切1个controller,  app.run是module被载入那时候实行的编码. 能够了解成Silverlight MVVM里边的oninit方式.

<html>

<script src="angular.min.js">" data-word='script' class="" >script>

<script type="text/javascript">

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

    app.run(function($rootScope){

        $rootScope.message="hello frank!";

    });

" data-word='script' class="" >script>

<head>

    <div ng-app="myapp">

        <h1>{{ message }}" data-word='h1' class="" >h1>

    " data-word='div' class="" >div>

" data-word='head' class="" >head>

<body>

" data-word='body' class="" >body>

" data-word='html' class="use" >html>

1.2 AngularJS会优先选择获得Controller中$scope加上的值.

编码给出: 分別有3个{message}.  testControl2中在$scope中再次授予了message值.

<html>

<script src="angular.min.js">" data-word='script' class="" >script>

<script type="text/javascript">

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

    app.run(function($rootScope){

        $rootScope.message="hello frank!";

    });

    app.controller('testControl1',function(){

        

    });

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

        $scope.message = "hello loch!";

    });

    

" data-word='script' class="" >script>

<head>

    <div ng-app="myapp">

        {{ message }}

        <div ng-controller="testControl1">

            {{ message }}

        " data-word='div' class="" >div>

        <div ng-controller="testControl2">

            {{ message }}

        " data-word='div' class="" >div>

    " data-word='div' class="" >div>

" data-word='head' class="" >head>

<body>

" data-word='body' class="" >body>

" data-word='html' class="use" >html>

运作結果:  testControl2下的message被改动了.       

hello frank! 

hello frank! 

hello loch!

          二. 控制板(ng-Controller)

            ng-Controller气氛二种状况这种是包括,另这种是单独. 人们姑且称为 父子关系和弟兄关联吧.

            2.1 父子关系

            2.1.1 编码给出:ChildController 包括在了ParentController里边, 2个button都对Count字段名开展赋值。

<html>

<script src="angular.min.js">" data-word='script' class="" >script>

<script type="text/javascript">

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

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

        $scope.Count = 1;

        $scope.addParent = function(){

            $scope.Count+=1;

        }

    });

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


点击这里复制本文地址 以上内容由黑资讯整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!
  • 2条评论
  • 蓝殇铃予2022-06-01 19:51:20
  • tion($scope){        $scope.Count = 1;        $scope.addParent = function(){ 
  • 冬马芩酌2022-06-01 14:28:27
  • ;    hello frank! hello frank! hello loch!      &nbs

支持Ctrl+Enter提交

黑资讯 © All Rights Reserved.  
Copyright Copyright 2015-2020 黑资讯
滇ICP备19002590号-1
Powered by 黑客资讯 Themes by 如有不合适之处联系我们
网站地图| 发展历程| 留言建议| 网站管理