[AngularJS] How to create Directives?

最新推荐文章于 2020-07-19 16:49:41 发布

原创最新推荐文章于 2020-07-19 16:49:41 发布 · 946 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #components #app #ui

JavaScript_CSS 专栏收录该内容

36 篇文章

订阅专栏

本文介绍如何在AngularJS中创建自定义指令，并通过实例演示了两种不同类型的指令：hi和hello。此外，还展示了如何使用$compile服务动态添加这些指令到DOM中。

Directives are the reusable UI components in AngularJS. In this blog, i will show you how to create custom directives in AngularJS.

var app = angular.module('App', []);

app.directive('hi', function() {
    return {
        template: '<h2>Hi There</h2>',
        replace: true
    };
});

app.directive('hello', function() {
    return {
        template: '<h2>Hello There</h2>',
        replace: true
    };
});

app.directive('customDirective', function($compile) {
    return {
        template: '<a ng-click="addType(\'hi\')">Add Hi</a><br/><a ng-click="addType(\'hello\')">Add Hello</a><div class="holder">',
        link: function(scope, element, attr) {
            scope.addType = function(type) {
                var el = $compile('<div ' + type + '></div>')(scope);
                $('.holder', element).append(el);
            }
        }
    };
});