angular创建自定义的指令

来源：互联网发布：如何用淘宝买东西编辑：程序博客网时间：2024/04/29 22:41

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。

你可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">


<garyhu1></garyhu1>


<script>
var app = angular.module("myApp", []);
app.directive("garyhu1", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>


</body>
</html>

你可以通过以下方式来调用指令：

元素名
属性
类名
注释

以下实例方式也能输出同样结果:

元素名

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">


<garyhu1></garyhu1>


<script>
var app = angular.module("myApp", []);
app.directive("garyhu1", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>


</body>
</html>

属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">


<div garyhu1></div>


<script>
var app = angular.module("myApp", []);
app.directive("garyhu1", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>


</body>
</html>

类名

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">


<div class="garyhu1"></div>


<script>
var app = angular.module("myApp", []);
app.directive("garyhu1", function() {
    return {
        restrict : "C",
        template : "<h1>自定义指令!</h1>"
    };
});
</script>


<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "C" 才能通过类名来调用指令。</p>


</body>
</html>

注释

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">


<!-- directive: garyhu1 -->


<script>
var app = angular.module("myApp", []);
app.directive("garyhu1", function() {
    return {
        restrict : "M",
        replace : true,
        template : "<h1>自定义指令!</h1>"
    };
});
</script>


<p><strong>注意：</strong> 我们需要在该实例添加 <strong>replace</strong> 属性， 否则评论是不可见的。</p>


<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "M" 才能通过注释来调用指令。</p>


</body>
</html>

限制使用

你可以限制你的指令只能通过特定的方式来调用。

实例

通过添加 restrict 属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用:

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">


<garyhu1></garyhu1>


<div garyhu1></div>


<script>
var app = angular.module("myApp", []);
app.directive("garyhu1", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});
</script>


<p><strong>注意：</strong> 通过设置 <strong>restrict</strong> 属性值为 "A" 来设置指令只能通过 HTML 元素的属性来调用。</p>


</body>
</html>

restrict 值可以是以下几种:

E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

angular自定义指令的两种写法：

上面这种，感觉更清晰明确一点。

// angular.module('MyApp',[])// .directive('zl1',zl1)// .controller('con1',['$scope',func1]);//// function zl1(){//   var directive={//     restrict:'AEC',//     template:'this is the it-first directive',//   };//   return directive;// };//// function func1($scope){//   $scope.name="alice";// }//这是教程里类似的写法angular.module('myApp',[]).directive('zl1',[ function(){  return {    restrict:'AE',    template:'thirective',    link:function($scope,elm,attr,controller){      console.log("这是link");    },    controller:function($scope,$element,$attrs){      console.log("这是con");    }  };}]).controller('Con1',['$scope',function($scope){  $scope.name="aliceqqq";}]);

还有指令配置项的：link controller等在项目运用中有遇到过：

angular.module('myApp', []).directive('first', [ function(){    return {        // scope: false, // 默认值，共享父级作用域        // controller: function($scope, $element, $attrs, $transclude) {},        restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment        template: 'first name:{{name}}',    };}]).directive('second', [ function(){    return {        scope: true, // 继承父级作用域并创建指令自己的作用域        // controller: function($scope, $element, $attrs, $transclude) {},        restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment        //当修改这里的name时，second会在自己的作用域中新建一个name变量，与父级作用域中的        // name相对独立，所以再修改父级中的name对second中的name就不会有影响了        template: 'second name:{{name}}',    };}]).directive('third', [ function(){    return {        scope: {}, // 创建指令自己的独立作用域，与父级毫无关系        // controller: function($scope, $element, $attrs, $transclude) {},        restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment        template: 'third name:{{name}}',    };}]).controller('DirectiveController', ['$scope', function($scope){    $scope.name="mike";}]);

1 0