DIV CSS 佈局教程網

1、作用域

當你在angularJs中創建控制器時，可以將$scope對象作為一個參數進行傳遞；

scope 是一個 JavaScript 對象，帶有屬性和方法，這些屬性和方法可以在視圖和控制器中使用。

AngularJS 應用組成如下：

• View(視圖), 即 HTML。
• Model(模型), 當前視圖中可用的數據。
• Controller(控制器), 即 JavaScript 函數，可以添加或修改屬性。

scope 是模型。

舉例：通過angularJs在js中的一些方法對變量進行賦值：

<div ng-app="myApp" ng-controller="myCtrl">

    <h1>{{carname}}</h1>

</div>

<script>
    var app = angular.module("myApp",[]);
    app.controller('myCtrl',function($scope)
    {
        $scope.carname='volvo';
    })

</script>

當我們使用 ng-repeat 指令時，每個重復項都訪問了當前的重復對象:

舉例：

每個 <li> 元素可以訪問當前的重復對象，這裡對應的是一個字符串， 並使用變量 x 表示。

 <div ng-app="myApp" ng-controller="myCtrl">
     <ul>
         <li ng-repeat='x in list'>{{x}}</li>
     </ul>
 
 </div>
 
 <script>
     var app = angular.module("myApp", []);
     app.controller('myCtrl', function ($scope) {
         $scope.list = ['kunyashaw', 'berryshine', 'niu', 'abei'];
     })
 </script>

所有的應用都有一個 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用於整個應用中。是各個 controller 中 scope 的橋梁。用 rootscope 定義的值，可以在各個 controller 中使用

<div ng-app="myApp" ng-controller="myCtrl">
    <ul>
        <li ng-repeat='x in list'>{{lastName}}{{x}}</li>
    </ul>

</div>

<script>
    var app = angular.module("myApp", []);
    app.controller('myCtrl', function ($scope,$rootScope) {
        $scope.list = ['kunyashaw', 'berryshine', 'niu', 'abei'];
        $rootScope.lastName='zhang';
    })
</script>

2、AngularJs控制器

AngularJS 應用程序被控制器控制，ng-controller 指令定義了應用程序控制器；

控制器是 JavaScript 對象，由標准的 JavaScript 對象的構造函數 創建

 <div ng-app="myApp" ng-controller="ctl">
     <input ng-model="FirstName">
     <input ng-model="LastName">
 
     <p>姓名為:{{FirstName +'--' +LastName}}</p>
 
 </div>
 
 <script>
     var app = angular.module('myApp', []);
     app.controller('ctl', function ($scope) {
         $scope.FirstName = 'zhang';
         $scope.LastName = 'zhonglei';
     })
 </script>

AngularJS 應用程序由ng-app定義，應用程序在<div>內運行；ng-controlle='ctl'屬性是一個angularJS指令，用於定義一個控制器；ctl函數是一個javaScript函數；

AngularJs使用$scope對象（是一個應用對象，屬於應用 變量和函數）來調用控制器；控制器的$scope用來保存AngularJS的對象，控制器在作用域 中創建了兩個屬性（FirstName、LastName），ng-model指令綁定輸入域到控制器的屬性.

下面的例子是調用函數:

<div ng-app="myApp" ng-controller="ctl">
    <input ng-model="FirstName">
    <input ng-model="LastName">

    姓名為:{{fullName()}}

</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('ctl', function ($scope) {
        $scope.FirstName = 'zhang';
        $scope.LastName = 'zhonglei';
        $scope.fullName= function (){
            return $scope.FirstName +"  "+ $scope.LastName;
        }
    })
</script>