AngularJS之基礎-4 DI(控制器參數、監聽)、指令(模板包含、節點控制)、事件綁定

1、DI-控制器參數

$scope

  - 在js和html之間傳遞數據

  - 僅在控制器做用域內有效

$element

  - 是一個jQuery對象

  - 做用域控制器所在的html元素

  - 在js中，經過$element獲取DOM對象

      - var e = $element.children().eq(0);

      - $scope.w = e.width();

      - $scope.h = e.height();

$http

  - http協議請求

      - $http.get(url).success(function(result){});

2、DI-監聽

$watch

  - 監聽變化

  - 語法

      - $scope.$watch('w',function(to,from){

           e.width(to);

        });

      - $scope.$watch('h',function(to,from){

           e.height(to);

        });

3、指令-模板包含

ng-include

  - 直接引用外部文件

      - <div ng-include src="tpl.html"></div>

      - <div ng-include="tpl.html"></div>

  - 配合變量引入文件

      <section data-ng-app="" data-ng-init="url='contact.html'">

          <div data-ng-include="url"></div>

      </section>

4、指令-節點控制

ng-style

  - 直接指定樣式

    <div ng-style="{width:100 + 'px',height:100 + 'px', backgroundColor:'red'}"></div>

  - 經過控制器定義樣式變量

    <script>

         function myCtrl($scope,$element){

             $scope.style = {width:100 + 'px',height:100 + 'px',backgroundColor:'blue'};

         }

    </script>

ng-class

  - 直接指定類

    <div ng-controller="TestCtrl" ng-class="'cls'"></div>

  - ng-class-even 和 ng-class-odd

    <ul ng-init="l=[1,2,3,4]">

        <li ng-clas-odd="'odd'" ng-class-even="'even'" ng-repeat="m in l">` m `</li>

    </ul>

顯示和隱藏

其餘屬性

5、事件綁定

文本變化

鼠標點擊

鼠標移動

總結：本章內容主要介紹了 AngularJS DI(控制器參數、監聽)、指令(模板包含、節點控制)、事件綁定