angularJS 自定义指令 属性:restrict、template、replace

本文介绍如何在AngularJS中使用自定义指令简化用户列表的显示,并解释了指令的使用方式及其属性的作用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    假如我们要展示一个用户list,使用angularJS,可以这样做:先在控制器中定义用户列表的数组,再在html中写上相应的dom元素,如下:

js:

angular.module('myApp',[])
.controller('myCtrl',['$scope',function($scope){
    $scope.users=[
        {id:12,name:'张三'},
        {id:15,name:'李四'},
        {id:18,name:'王五'}
    ]
}])
html:
<div ng-app="myApp" ng-controller="myCtrl">
    <ul>
        <li ng-repeat="user in users">{{ user.id }} {{ user.name }}</li>
    </ul>
</div>
结果:

    然而,假如这个用户list有多个页面要用到,或者说我们不想直接把它写在html里,这时就可以使用angularJS的“自定义指令”了,先来看自定义指令实现上面需求的例子:

js:

angular.module('myApp',[])
            //自定义指令的方法directive
            //第一个参数是指令名称
            //第二个参数是个function,返回设置指令属性的对象
            .directive('userList',function(){
                return {
                    restrict:'ECA',
                    template:'<ul><li ng-repeat="user in users">{{ user.id }} {{ user.name}}</li></ul>',
                    replace:true
                }
            })
            .controller('myCtrl',['$scope',function($scope){
                $scope.users=[
                    {id:12,name:'张三'},
                    {id:15,name:'李四'},
                    {id:18,name:'王五'}
                ]
            }])

html:

<div ng-app="myApp" ng-controller="myCtrl">
    <user-list></user-list>
</div>
结果:

    实例中,我们定义了一个指令‘userList’,由于L是大写,依据angularJS约定,在html中使用这个指令时,必须写作:‘user-list’,即大写字母转成小写并在该字母前面加上 '-' 。

    发现使用第二种方法完成这个需求,设置的返回对象的属性 template和第一种方法中的html中所写的dom相同,template属性就是这个作用,设置dom模板,用于生成指令<user-list></user-list>。

    而repalce属性,指示template设置的dom模板是否替换掉<user-list></user-list>标签,如果为true,则<user-list></user-list>标签不再生成;如果为false,则<user-list></user-list>标签还生成,dom模板在<user-list>内生成。

    除了<user-list></user-list>这样使用指令              ----元素element的方式:E (推荐)
      还可以这样用: <div class="user-list"></div>    ----类class的方式:C (推荐)

      或者:<div user-list></div>                                ----属性attribute的方式:A(推荐)

      以及:<!-- directive:user-list -->                         ----注释 mark 的方式:M

    那么设置这个指令可以使用哪些方式使用,就是 restrict 属性来设置,可以设为一种或多种,如上面的 'ECA',指示可以用元素的方式,类的方式,特性的方式来使用。


### 创建和使用AngularJS自定义指令 #### 定义自定义指令AngularJS中,通过`module.directive()`方法来注册一个新的指令。此函数接受两个参数:第一个是指令名称;第二个是一个返回配置对象的工厂函数。 ```javascript var app = angular.module('myApp', []); app.directive('myDirective', function() { return { restrict: 'E', template: '<div>A Custom Directive</div>', replace: true, link: function(scope, element, attrs) {} }; }); ``` 上述代码片段展示了如何创建一个名为`<my-directive>`的新HTML标签[^1]。 #### 使用属性、类名或注释作为指令触发器 除了可以将指令定义为元素外,还可以将其设置为仅限于特定类型的声明方式——即A(属性),C(类),M(注释): ```javascript return { restrict: 'ACME' // A - Attribute, C - Class, E - Element name, M - Comment }; ``` #### 数据绑定与交互 为了使指令能够接收外部数据并作出响应,在链接函数内可以通过第三个参数访问这些传入的数据(称为attributes)。同时也可以利用双向绑定机制让父作用域中的变量自动更新子组件的状态变化。 ```html <!-- HTML --> <div my-directive="expression"></div> ``` ```javascript // JavaScript link: function(scope, elem, attr){ scope.$watch(attr.myDirective,function(newValue){ /* ... */ }); } ``` #### 高级特性 对于更复杂的场景,则可能需要用到编译期(compilation phase)处理逻辑以及控制器(controller)概念。这允许开发者分离关注点,并实现更加模块化的开发模式。 - **Compile Function**: 编写预处理器逻辑,用于修改DOM结构之前的操作。 - **Controller As Syntax**: 推荐做法之一就是采用controller as语法糖形式编写控制器部分,从而提高可读性和维护性。 ```javascript app.directive('complexDir', function(){ var controller = ['$scope','$element','$attrs',function($scope,$elem,$attr){ $scope.doSomething = function(){/*...*/}; }]; return{ restrict:'EA', templateUrl:'/path/to/template.html', controller:controller, controllerAs:'vm' } }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值