angularJs-directive（scope、require、link）应用 -

SophiaHzy

浏览: 11824 次
性别:
来自: 武汉

最近访客更多访客>>

李俊良

fromciom

kittyboy0001

素年vs锦爱

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

angularJs-directive（scope、require、link）应用

博客分类：

AngularJs

web angularJs directive

断续续学习，待到完全沉淀后再慢悠悠的做好记录。

这篇是angularJs中的directive，本文主要研究directive中的require、link、scope，不涉及基本属性。目录如下：

内置指令

自定义指令

指令实例

属性解释

编译过程

（一）内置指令

在angularJs应用中，到处可见指令(内置)。如：ng-app(标记angularJs开始管理的范围)、ng-controller(controller管理边界)、ng-model(双向数据绑定)、ng-repeat(遍历且克隆)、ng-class(自定义class样式)等。具体所有内置指令可见源码。

内置指令，在使用时只需根据需求找出对应的指令，添加在html应用该指令的位置即可。如下图是最基本的应用：

（二）自定义指令

在编写自定义指令之前，你必须使用过angularJs一段时间，且对于指令(directive)也做过系列的学习，否则你会无从下手。

这时，你需先明白以下三点概念。

指令的解释：

本身就是个替换的过程 {compile（编译--负责编译与替换）和link（链接--进行数据绑定）}

自定义指令的使用情景：

1.需修改DOM(无内置指令支持时)

2.需自定义标签

自定义指令的作用：

把我们自定义的语义化标签替换成浏览器能够认识的HTML标签

假设以上OK，那下面便是coding部分了。最近感悟：看三千行代码，不如敲一个实例(不指copy)。

（三）指令示例

3.1----------helloDirective

directive的定义同controller、service一样，通过module创建。

var appModule = angular.module('project', []);
appModule.directive('demoDirective', ['', function(){
    // Runs during compile
    return {
        // name: '',
        // priority: 1,
        // terminal: true,
        // scope: {}, // {} = isolate, true = child, false/undefined = no change
        // controller: function($scope, $element, $attrs, $transclude) {},
        // require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
        // restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
        // template: '',
        // templateUrl: '',
        // replace: true,
        // transclude: true,
        // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
        link: function($scope, iElm, iAttrs, controller) {
            
        }
    };
}]);

还是先列出helloWord应用。

<html ng-app='project'>
	<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <hello>
            <br/>
	    <sapn>content</sapn><br/>
	</hello>
    </body>
    <script src="angular.min.js"></script>
    <script src="demoStep1Direc.js"></script>
</html>

var appModule = angular.module('project', []);

appModule.directive('hello', function() {
    return {
        restrict: 'EA',
        template: '<div>Hi directive<sapn ng-transclude></sapn></div>',
        replace: true,
        transclude: true,
        priority: 0,
        scope: true
    };
});

在chrome中运行如下图：

你会发现，在html中<hello>这个自定义标签，已变成<div>，即html标签。这都是directive中的template与replace属性的功劳，解释：

如replace 为true，则将模版(template)内容替换当前的HTML元素，并将原来元素的属性、class一并迁移。

说到template，就得提到另一个templateUrl。同template类似。加载url(*.html)。注：此模板加载是异步，compilation/linking都被搁置，待加载完后执行。

3.2------------------addBook

综合示例，包含tansclude、directive中scope作用域、controller在多指令中共享。

下面html代码中定义了两个input，用于用户输入bookInfo。

<html ng-app='project'>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
         <script src="angular.min.js"></script>
    </head>
     <body ng-controller='books.list' >
     书名：<input type="text" ng-model="bookName" value="" required/>
     作者：<input type="text" ng-model="bookAuthor" value="" />
        <add></add>
        <edit>
            <div info book-List="bookList" demo-Name="单向绑定"></div>
        </edit>
    </body>
    <script src="demoCtrl.js"></script>
</html>

其中

<add></add>

是个自定义指令，用于保存。

demoCtrl.js-service ：初次进入页面时的book测试数据，与add、delete操作方法。

appModule.service('bookService', ['$rootScope',
  function($rootScope) {
    return {
      books: [{
        name: 'javaScript编程艺术',
        author: '艺术'
      }, {
        name: 'AngularJS in Action',
        author: 'Action'
      }, {
        name: 'The Beginner’s guide to AngularJS',
        author: 'AngularJS'
      }],
      addBook: function(book) {
        this.books.push(book);
        $rootScope.$broadcast('books.update');
      },
      removeBook: function(book) {
        this.books.splice(book, 1);
        $rootScope.$broadcast('books.update');
      }

    }
  }
]);

addDirective

appModule.controller('books.list', ['$scope', 'bookService',
  function(scope, bookService) {
    scope.bookName = "", scope.bookAuthor = "";
    //监听值改变，就将bookList填充
    scope.$on('books.update', function(event) {
      scope.bookList = bookService.books;
    });
    scope.bookList = bookService.books;
  }
]);

appModule.directive('add', function(bookService) {
  return {
    restrict: 'EA',
    replace: true,
    transclude: true,
    template: '<input ng-transclude type="button" value="addBook"/>',
    link: function(scope, element, attrs) {
      element.bind("click", function() {
        bookService.addBook({
          name: scope.bookName,
          author: scope.bookAuthor
        });
        scope.$apply(); //通知angularJs进行双向绑定
      });
    }
  }
});

上述add指令中，对当前元素进行绑定点击事件，即添加用户输入的图书信息。在click事件里调用公共的 service里的addBook()。

这时我们需将图书展示在页面中。

 <div info book-List="bookList" demo-Name="单向绑定"></div>

其中info也是个directive，里面替换的便是图书列表数据。后面两个属性在下面阐释。

appModule.directive('edit', function(bookService) {
  return {
    restrict: 'EA',
    replace: true,
    transclude: true,
    template: '<div ng-transclude></div>',
    controller: function() {
      this.removeBook = function(param) {
        bookService.removeBook(param);
      }
    }
  }
});

appModule.directive('info', function(bookService) {
  return {
    restrict: 'EA',
    replace: true,
    require: '^edit',
    scope: {
      demoName: '@',
      bookList: '='
    },
    template: '<ul ng-repeat="bk in bookList">' +
      '<li ng-mousedown="showEdit()">{{bk.name}}' +
      '<span ng-show="bFlag">    ' +
      '<input type="button" value="delete"ng-mousedown="deleteBook(this.bk)"/></span></li>' +
      '<li>{{bk.author}}</li></ul>',
    link: function(scope, element, attrs, editCtrl) {
      scope.bFlag = false;
      scope.showEdit = function(param) {
        scope.bFlag = !scope.bFlag;
      },
      scope.deleteBook = function(param) {
        editCtrl.removeBook(scope);
      }
    }
  }
});

上指令中涉及的scope作用域，在此说明。属性解释-scope

scope: {
      demoName: '@',
      bookList: '='
    }

参考下图中scope取值说明：

在此demo中，定义了一个单向绑定demoName：<div info book-List="bookList" demo-Name="单向绑定"></div>

bookList为一个双向绑定：<div info book-List="bookList" demo-Name="单向绑定"></div>，其中bookList为父scope中的变量,指定[=],达到双向绑定

属性解释-require 通过require让多个指令共享ctrl数据

在上述代码中，infodirective通过require属性指定，共享editdirective中的controller。require属性分别有：

可看到，在infodirective中的link函数参数里便加入了editCtrl的引用，在下面的deleteBook函数中接着调用该ctrl的方法。editCtrl.removeBook(scope)。

在editdirective中的controller里，通过this对外暴露该接口，使得共享该ctrl的可以直接使用。

到这里，上张效果图。addBook

deleteBook

属性解释-link

最后，附上指令的编译流程。从网友博客中看到，结合自己理解。

<1>.ng框架在页面载入完后根据ng-app划定的作用域来调用$compile服务进行编译。

清点作用域内的DOM元素:看哪些元素上使用了指令(如<div ng-modle=”m”></div>)或哪些元素本身就是个指令(如<mydierc></mydirec>)，

或使用了插值指令( {{}}也是一种指令,叫interpolation directive)，列好清单。

根据指令的优先级(priority)排列，还根据指令的配置参数(template,repalce,transclude等)进行转换DOM。

<2>.开始按顺序执行指令的compile函数，该函数内可访问DOM节点进行DOM转换。执行完后返回link(这些link会被$compile汇总,即合体)。

<3>.把view和scope链接起来(即数据绑定)在DOM上注册监听器动态修改scope中的数据，或用$watchs监听scope中的变量来修改DOM,从而双向绑定。

<4>.指令中的link函数在compile函数执行后返回link，但若compile一开始就未配置，就无从返回link。

这时$compile就用当前指令配置的link执行，故此link可访问scope/DOM。

---------------------------------------------分割线-------------------------------------------

写在落尾处，手执键盘，实在杂乱，只差全贴图而不言，望后续更有耐心。假有看官略瞟一二，实属在下荣幸，另，文章杂乱还请多多海涵。

查看图片附件

分享到：

由后端转向前端的js扫盲篇-数据类型

2014-07-30 17:19
浏览 3885
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

angularJs-directive（scope、require、link）应用

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

angularJs-directive（scope、require、link）应用

评论

发表评论

相关推荐

最近访客更多访客>>