学习AngularJs:Directive指令用法（完整版）

学习AngularJs:Directive指令用法（完整版）是一篇关于AngularJS指令用法的详细攻略。下面我来详细讲解该攻略。

概述

该攻略主要介绍AngularJS中Directive指令的用法，指令是AngularJS的核心部分，它们允许我们扩展HTML，使其具有复杂的行为和交互特性。指令可以用于添加自定义标记，创建自定义元素，设置元素样式，添加事件监听器等。

该攻略分成了六部分，包括介绍指令的基本语法、详解AngularJS内置指令、自定义指令、指令编译、指令作用域和指令通信等内容。

示例说明

下面我们来看两个示例说明。

示例一：自定义指令

在该攻略中，我们可以学习到如何自定义一个指令。例如，我们可以通过自定义指令来实现一个类似于todo list的应用。

angular.module('myApp', [])
    .controller('myCtrl', function($scope) {
        $scope.items = [
            {name: 'Item 1', done: false},
            {name: 'Item 2', done: true},
            {name: 'Item 3', done: false}
        ];
    })
    .directive('todoItem', function() {
        return {
            restrict: 'E',
            scope: {
                item: '=',
                remove: '&'
            },
            template: '<div><input type="checkbox" ng-model="item.done"/> {{item.name}} <button ng-click="remove()">Remove</button></div>'
        }
    });

在上面的示例代码中，我们首先创建了一个todo list应用，然后我们定义了一个名为todoItem的自定义指令。该指令是一个元素指令，它有两个属性：item和remove。然后我们通过template属性指定了这个元素指令对应的HTML模板，最后我们将该自定义指令加入到我们的应用上。

示例二：指令作用域

在该攻略中，我们还可以学习到指令作用域的概念。例如，我们可以利用指令作用域的概念来自定义一个上传文件的指令。

angular.module('myApp', [])
    .directive('fileUpload', function() {
        return {
            restrict: 'E',
            scope: {
                onComplete: '&'
            },
            template: '<input type="file" ng-model="files" multiple><button ng-click="upload()">Upload</button>',
            link: function(scope, element, attrs) {
                scope.upload = function() {
                    // 上传文件的操作
                    // 当上传完毕后，执行回调函数
                    scope.onComplete({
                        files: scope.files
                    });
                }
            }
        }
    })
    .controller('myCtrl', function($scope) {
        $scope.uploadComplete = function(files) {
            alert(files.length + ' files uploaded!');
        }
    });

在上面的示例代码中，我们首先定义了一个名为fileUpload的自定义指令，它是一个元素指令，它有一个属性onComplete。然后我们通过template属性指定了该元素对应的HTML模板，该模板包括一个文件上传控件和一个按钮。最后我们在link函数中定义了一个upload函数，该函数用于上传文件，并在上传完成后执行回调函数onComplete。

在controller中，我们定义了uploadComplete函数，该函数作为回调函数传入到fileUpload指令中。当上传完成后，我们通过该回调函数来处理上传完成后的操作。

总结

学习AngularJs:Directive指令用法（完整版）是一篇非常详细的AngularJS指令学习攻略。在该攻略中，我们可以学习到指令的基本语法、内置指令、自定义指令、指令编译、指令作用域和指令通信等知识点。并且，该攻略也提供了多个示例，帮助我们更好地理解指令的用法。