标签归档：directive

使用angularjs directive生成api方法供其他地方调用angularjs directive expose api

AngularJS、、

有些时候我们需要directive生成api，可以在其他地方(controller)调用
image1419911269
下面介绍下简单的步骤：

使用directive的双向绑定绑定controller里的变量

html:
<div expose="exposedApi"></div>
js:

directive('expose',function(){
  return {
    restrict: "A",
    scope: {
      api: "=expose"
    }
  };

这个时候controller离的exposedApi变量和directive里的api是双向绑定的

给directive里的api增加可调用的方法

directive('expose',function(){
  return {
    restrict: "A",
    scope: {
      api: "=expose"
    },
    controller: function($scope){
      $scope.number = 0;
      $scope.api={
        count:function(){
          $scope.number ++;
        }
      };
    },
    template: '<div class="well">' +
              '<p>count: {{number}}</p>' +
              '</div>'
  };

调用directive里的方法

controller("ctrl",function($scope){
  $scope.count = function(){
    $scope.exposedApi.count();
  };
})

Demo:

http://shengoo.github.io/angularjs-practice

完整代码：

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
  <script src="../bower_components/angular/angular.js"></script>
</head>
<body ng-controller="ctrl">
<div class="container">
<div expose="exposedApi"></div>
<a ng-click="count()" class="btn btn-primary">click</a>
<div expose="exposedApi2"></div>
<a ng-click="count2()" class="btn btn-primary">click</a>
</div>
<script>
angular.module("app",[])
.controller("ctrl",function($scope){
  $scope.count = function(){
    $scope.exposedApi.count();
  };
  $scope.count2 = function(){
    $scope.exposedApi2.count();
  };
})
.directive('expose',function(){
  return {
    restrict: "A",
    scope: {
      api: "=expose"
    },
    controller: function($scope){
      $scope.number = 0;
      $scope.api={
        count:function(){
          $scope.number ++;
        }
      };
    },
    template: '<div class="well">' +
              '<p>count: {{number}}</p>' +
              '</div>'
  };
})
</script>
</body>
</html>

angularjs directive

AngularJS

在AngularJS中，Dom操作应该在directive里进行，而不应该在controllers, services或者其他任何地方。

directives命名

  • 使用不重复的前缀
    • 防止和其他人重复
    • 易读
  • 不要用ng-作为你的directive的前缀
  • 常见情况：两个单词
    • AngularUI project 用的是 “ui-“

什么时候用directives?

  • 可复用的HTML控件
    <my-widget>

  • 可复用的HTML行为
    <div ng-click="...">

  • 包装一个jQuery插件
    <div ui-date></div>

  • 你需要和DOM交互的绝大多数情况

创建一个directive

先给你的directive创建一个module

angular.module('MyDirectives',[]);

在你的app里加入directive module的依赖

angular.module('app',['MyDirectives']);

注册你的directive

angular.module('MyDirectives')
.directive('myDirective', function(){
  // TODO:
});

在HTML里使用你的directive

<div my-directive>...</div>

Restrict参数

‘A’

attributes
<div my-directive></div>

‘E’

element
<my-directive></my-directive

‘C’ ‘M’

rarely used
‘C’: classes ‘M’ : comments

组合

restrict: 'AE'

隔离的scope

directive默认是没有scope的，我们可以给它一个scope

scope: {
  someParam: '='
}

或者
scope: true
这个scope不会继承其他scope

scope参数

scope参数是从HTML的属性（attribute）传进来的

scope: {
  param1: '=', // 双向绑定（directive和controller）
  param2: '@', // 单向绑定
  param3: '&'  // 单向行为
}

<div my-directive
  param1="someVariable"
  param2="My name is {{name}}"
  param3="doSth()"
>

AngularJs分页pagination directive

AngularJS、、

html

<div ng-app="hello">
    <div ng-controller="pagingCtrl">
        <paging>
            <table class="table table-striped table-bordered table-hover">
                <tr>
                    <th>id</th>
                    <th>name</th>
                </tr>
                <tr ng-repeat="item in data">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </table>
            <ul class="pagination" num-pages="tasks.pageCount" current-page="tasks.currentPage" on-select-page="selectPage(page)">
                <li ng-class="{disabled: noPrevious()}"> <a ng-click="selectPrevious()">&laquo;</a>
                </li>
                <li ng-repeat="page in pages" ng-class="{active: isActive(page)}"> <a ng-click="selectPage(page)">{{page}}</a>
                </li>
                <li ng-class="{disabled: noNext()}"> <a ng-click="selectNext()">&raquo;</a>
                </li>
            </ul>
        </paging>
    </div>
</div>

js

var myModule = angular.module('hello', []);
myModule.controller('pagingCtrl', function ($scope, $http) {
    $scope.data = [{
        id: 1,
        name: "a"
    }, {
        id: 2,
        name: "b"
    }];
    $scope.currentPage = 1;
    $scope.numPages = 5;
    $scope.pageSize = 10;
    $scope.pages = [];
    //get first page
    /*$http.get('url',
                {
                    method: 'GET',
                    params: {
                        'pageNo': $scope.currentPage,
                        'pageSize': $scope.pageSize
                    },
                    responseType: "json"
                }).then(function (result) {
                    $scope.data = result.data.Data;
                    $scope.numPages = Math.ceil(result.data.Total / result.data.PageSize);
                });*/
    $scope.onSelectPage = function (page) {
        //replace your real data
        /*$http.get('url',
                {
                    method: 'GET',
                    params: {
                        'pageNo': page,
                        'pageSize': $scope.pageSize
                    },
                    responseType: "json"
                }).then(function (result) {
                    $scope.data = result.data.Data;
                    $scope.numPages = Math.ceil(result.data.Total / result.data.PageSize);
                });*/
    };
});
myModule.directive('paging', function () {
    return {
        restrict: 'E',
        //scope: {
        //    numPages: '=',
        //    currentPage: '=',
        //    onSelectPage: '&'
        //},
        template: '',
        replace: true,
        link: function (scope, element, attrs) {
            scope.$watch('numPages', function (value) {
                scope.pages = [];
                for (var i = 1; i <= value; i++) {
                    scope.pages.push(i);
                }
                alert(scope.currentPage)
                if (scope.currentPage > value) {
                    scope.selectPage(value);
                }
            });
            scope.isActive = function (page) {
                return scope.currentPage === page;
            };
            scope.selectPage = function (page) {
                if (!scope.isActive(page)) {
                    scope.currentPage = page;
                    scope.onSelectPage(page);
                }
            };
            scope.selectPrevious = function () {
                if (!scope.noPrevious()) {
                    scope.selectPage(scope.currentPage - 1);
                }
            };
            scope.selectNext = function () {
                if (!scope.noNext()) {
                    scope.selectPage(scope.currentPage + 1);
                }
            };
            scope.noPrevious = function () {
                return scope.currentPage == 1;
            };
            scope.noNext = function () {
                return scope.currentPage == scope.numPages;
            };
        }
    };
});

jsfiddle