zoukankan      html  css  js  c++  java
  • AngularJS中的控制器示例_3

    <!doctype html>
    <html ng-app="myApp">
    	<head>
    		<script src="C:\Users\yuli\Desktop\bower_components\angularjs\angular.js"></script>
    		<script type="text/javascript">
    			var myModule = angular.module('myApp', []);
    			myModule.controller('MyController', function ($scope, $timeout) {
    				var updateClock = function() {
    					$scope.clock = new Date();
    					$timeout(function() {
    						updateClock();
    					}, 1000);
    				};
    				updateClock();
    
    				$scope.a_click = function (msg){
    					console.log(msg);
    				}
    				$scope.value = 1;
    				$scope.add = function (n){
    					$scope.value += n;
    				}
    
    				$scope.clear = function(){
    					$scope.value = 0;
    				}
    			});
    
    			myModule.run(function($rootScope){
    				$rootScope.rootValue = -1;
    				$rootScope.add_n = function(n){
    					$rootScope.rootValue += n;
    				};
    			});
    		</script>
    	</head>
    	<body>
    		<div ng-controller="MyController">
    			<h1>Hello {{ clock }}!</h1>
    			这是AngularJS的测试程序。
    			<a href="" ng-click="a_click('hello')">click me console.log message.</a>
    			<a href="" ng-click="add(2)">add 2.</a>
    			<input type="text" ng-model="value"/>
    
    			<br />
    			<a href="" ng-click="clear()">clear.</a>
    			<br />
    			<input type="text" ng-model="rootValue"/>
    			<a href="" ng-click="add_n(value)">add n.</a>
    		</div>
    	</body>
    </html
    

      

  • 相关阅读:
    元素绑定与非元素绑定
    窗口之间的交互,windows和自定义的窗口集合
    e.which
    prop()和attr()
    web动画
    $.proxy()和$.makeArray()
    匿名自执行函数报错
    页面适配
    gulp
    伪元素和伪类
  • 原文地址:https://www.cnblogs.com/chengshuiqiang/p/4548087.html
Copyright © 2011-2022 走看看