angularJS 自定义指令

最新推荐文章于 2023-10-01 23:38:24 发布

outsiderlcy

最新推荐文章于 2023-10-01 23:38:24 发布

阅读量706

点赞数

分类专栏： angularJS 文章标签： angularjs

本文链接：https://blog.csdn.net/outsiderlcy/article/details/53063732

版权

angularJS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

angularJS 自定义属性

类似于过滤器filter，内置了许多方法同时可以自定义方法。
通过angular.model来创建模块对象：

-angular.model:

controller:控制器
run：初始化
filter：过滤器
directive：创建自定义（myHello->my-hello）
-restrict有四种定义的方式（注意大小写）：指定指令类型并可叠加使用
》E：元素，标签（重写HTML中的标签属性或者替换标签模板）
》A：属性（主要是功能性如：ng-if）
》C：class的方式，看做指令。但容易与class的样式混淆
》M：注释（注意空格）
—template：模板选项
-templateUrl：外部模板引用
-replace:替换（true：替换）
scope
-独立作用域true，互相独立不影响
-隔离作用域{}，不再与外面嵌套的标签再有任何继承的关系
绑定策略：用来绑定不同的数据
》@：绑定数据，绑定指令，绑定的普通字符串
》=：绑定数据，变量名
》&：函数传递

代码示例：

    <script>
    var m = angular.module('myApp',[]);//引入相应模块
    m.directive('hello',function(){//通过函数回调的形式
        return{
            restrict:'EAMC',//配置选项
            replace:true,
            template:'<div>hello angular </div>'
        };
    });
    </script>

    <hello></hello>
    <p hello></p>
    <p class="hello"></p>
    <!-- directive:hello  --><!--注意空格-->
    <div ng-controller="Aaa" >
    </div>

页面结果展示：
这里写图片描述

代码示例：

<script>
    var m = angular.module('myApp',[]);//引入相应模块
    m.directive('myTab',function(){//通过函数回调的形式
        return{
            restrict:'E',//配置选项
            replace:true,
            //scope:true,//独立
            scope:{
                myId:'@',
                myName:'=',
                myFn:'&'
            },//隔离作用域
            controller:['$scope',function($scope){
                $scope.name = 'miaov';
            }],
            template:'<div id="{{myId}}">\
            <input class="active" type="button" value="1" ng-click="myFn({num:456})">\
            <input type="button" value="2">\
            <input type="button" value="3">\
            <div style="display:block">{{name}}</div>\
            <div>22222222</div>\
            <div>33333333</div>\
            </div>'
        };
    });

    m.controller('Aaa',['$scope',function($scope){

        $scope.name = 'hello';
        $scope.show = function(n){
            alert(n);
        }
    }]);

    </script>

<body ng-controller="Aaa">
    <my-tab my-id="div1" my-name="name" my-fn="show(num)"></my-tab>
    <my-tab my-id="div2" my-name="name" my-fn="show(num)">></my-tab>

页面结果展示：
这里写图片描述

6.link:进行dom操作
》scope：作用域
》elemen：指的是父级的元素
》attr：当前标签上的属性
》reController

outsiderlcy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJS 自定义指令

angularJS 自定义属性类似于过滤器filter，内置了许多方法同时可以自定义方法。通过angular.model来创建模块对象：-angular.model:controller:控制器run：初始化filter：过滤器directive：创建自定义（myHello->my-hello） -restrict有四种定义的方式（注意大小写）：指定指令类型并可叠加使用》E：元
复制链接

扫一扫