zoukankan      html  css  js  c++  java
  • angular-$scope和$rootScope

    <body ng-app="myApp">
    		<div ng-controller="myCtrl">
    			<input type="text" ng-model="name"/>
    			<p>{{name}}</p>
    		</div>
    		<div ng-app="myApp" ng-controller="myCtrl1">
    			<input type="text" ng-model="name"/>
    			<p>{{name}}</p>
    		</div>
    		<div ng-app="myApp" ng-controller="myCtrl2">
    			<ul>
    				<!--下面两行语句等价-->
    				<!--<li ng-repeat="x in name">{{x.name+" "+lastname}}</li>-->
    				<li ng-repeat="x in name">{{x.name}} {{lastname}}</li>
    			</ul>
    		</div>
    		<script type="text/javascript">
    			var app=angular.module('myApp',[]);
    			app.controller("myCtrl",function($scope){
    				$scope.name="youyuanyuan"
    			})
    			app.controller("myCtrl1",function($scope){
    				$scope.name="zhengshaonong"
    			})
    			app.controller("myCtrl2",function($scope,$rootScope){
    				$scope.name=[{name:"zsn"},{name:"yyy"}]
    				$rootScope.lastname="zheng";
    			})
    		</script>
    	</body>
    

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

    所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。
    $rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。

    • [x] AngularJS 应用组成如下:
    • View(视图), 即 HTML。
    • Model(模型), 当前视图中可用的数据。
    • Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。

    调用控制器里的函数

    <body ng-app="myApp">
    		<div ng-controller="myCtrl">
    			<input type="text" ng-model="name"/>
    			<input type="text" ng-model="age"/>
    			<p>调用控制器里的函数:{{info()}}</p>
    		</div>
    		<script type="text/javascript">
    			var app=angular.module('myApp',[]);
    			app.controller("myCtrl",function($scope){
    				$scope.name="youyuanyuan";
    				$scope.age=10;
    				$scope.info=function(){
    					//注意变量前加上$scope
    					return $scope.name+" "+$scope.age;
    				}
    			})
    			
    		</script>
    	</body>
    

    控制器也可以有方法(变量和函数)

    外部文件中的控制器

    只需要把

  • 相关阅读:
    工厂方法模式
    代理模式
    观察者模式
    策略模式
    单例模式
    简单工厂模式
    lintcode:等价二叉树
    lintcode:被围绕的区域
    lintcode:二叉树的所有路径
    lintcode:快乐数
  • 原文地址:https://www.cnblogs.com/sakura-sakura/p/6678848.html
Copyright © 2011-2022 走看看