AngularJs基本篇二 (控制器属性 + 控制器方法)

最新推荐文章于 2020-08-24 11:24:54 发布

chr23899

最新推荐文章于 2020-08-24 11:24:54 发布

阅读量977

点赞数 1

分类专栏： angularjs 文章标签： angularjs

本文链接：https://blog.csdn.net/chr23899/article/details/50683829

版权

angularjs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.控制器

现在我们就用ng-controller指令来创建一个简单的控制器定义，如下所示：

<!DOCTYPE HTML>
<html>
<head>
	<title> test </title>
	<meta charset="utf-8">
	<script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
</head>
<body>
	<div ng-app="" ng-controller="Controller_test1">

    Input Your Name：<input type="text" ng-model="chr.name"> 
    <br/>
    Hello,  Your Name is: <span ng-bind="chr.name"></span> 
    <br/>

    </div>    

    <script>
    function Controller_test1($scope) {
       $scope.chr = {
          name: "chr"
       };
    }
    </script>
</body>
</html>

运行结果如下所示:

Input Your Name：
Hello, Your Name is: chr

控制器的嵌套:

<!DOCTYPE HTML>
<html>
<head>
	<title> test </title>
	<meta charset="utf-8">
	<script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
</head>
<body>
	<div ng-app="" ng-controller="Controller_test1">

    Input Your Name：<input type="text" ng-model="chr.name"> 
    <br/>
      <div ng-app="" ng-controller="Controller_test2">

      Input Your Name2：<input type="text" ng-model="chr.name"> 
      <br/>
      Hello,  Your Name2 is: <span ng-bind="chr.name"></span> 
      <br/>

      </div>    
    Hello,  Your Name is: <span ng-bind="chr.name"></span> 
    <br/>

    </div>    

    <script>
    function Controller_test1($scope) {
       $scope.chr = {
          name: "chr"
       };
    }
    function Controller_test2($scope) {
       $scope.chr = {
          name: "chr2"
       };
    }
    </script>
</body>
</html>

运行结果如下
Input Your Name：

Input Your Name2：
Hello, Your Name2 is: chr2

Hello, Your Name is: chr

2.控制器方法

自定义SayHi的方法实现如下:

<!DOCTYPE HTML>
<html>
<head>
	<title> 测试页 </title>
	<meta charset="utf-8">
	<script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
</head>
<body>
	<div ng-app="" ng-controller="Controller_test">
         Your name:
         <input type="text" ng-model="username">
         <button ng-click="sayHi()">打招呼</button>
         <hr />
         {{greeting}}
    </div>

    <script>
    function Controller_test($scope) {
      $scope.username = 'chr';
      $scope.sayHi = function() {
        $scope.greeting= 'Hi ' + $scope.username + '!';
      };
    }
</script>
</body>
</html>