7、angularJS 模块化技术

最新推荐文章于 2025-08-22 16:51:30 发布

4911071420313

最新推荐文章于 2025-08-22 16:51:30 发布

阅读量135

点赞数

分类专栏： angular_智能社

angular_智能社专栏收录该内容

5 篇文章

订阅专栏

本文介绍了AngularJS中directive指令的应用实例，展示了如何通过自定义指令实现输入框文本匹配显示的功能，并探讨了模块化开发的重要性，包括按需加载和封装等关键概念。

1、directive 指令

<!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>
    <script>
        var app = angular.module('test',[]);
        app.controller('con1',function($scope){
            $scope.arr = ['app','abc','beer','clear'];
        });
        app.directive('abc',function(){
            alert("执行了directive")
            return {
                restrict:'E',
                template:
                '<input type="text" ng-model="str"/>\
                 <ul>\
                    <li ng-repeat="v in arr" ng-show="v.indexOf(str)!=-1">{{v}}</li>\
                 <ul>'
            }
        })
    </script>
    </head>
<body>
    <div ng-app="test" ng-controller="con1">
        <abc></abc>
    </div>
</body>
</html>