angularjs指令
发布在angularjs2016年4月20日view:2643
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

这篇文章主要介绍如果编写自定义指令:

先来看一个最基本的指令

myApp.directive("myDirective",function(){
        return{
            restrict:"A",
            template:"<div>你好呀,哈哈哈</div>"}
});

页面上应用:

<div my-directive></div>

最终页面上会显示 你好呀,哈哈哈 这是最简单的一个指令,自定义指令有许多属性可以进行设置,下面是属性详解:

myApp.directive("myDirective",function(){
    return{
        restrict:"A",//指令类型,E元素指令,A属性指令,M注释指令,C类名指令
        templateUrl:"hello.html",//使用外部页面作为指令模板,当模板内容较多时建议用这个属性,这个属性不能与template共用,会报错
        template:"<div>你好呀,哈哈哈</div><div ng-transclude></div>",//指令模板
        replace:false,//是否替换原来指令内的内容
        transclude:true,//是否保留指令内的内容,如果包含则在指令模板中添加<div ng-transclude></div>这样的指令,以确认指令内原内容放置的位置
        scope:{},//是否独立scope
        compile:function(){//compile内一般做dom的操作,最后返回link方法,compile和link不能共用,如果有compile则link无效
            //对dom进行操作
            return function(){

            }
        },
        link:{//一般用来添加事件等
            pre:function(){},
            post:function(){}
        }
    }
})

指令与控制器之间的交互:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
    <hello howToLoad="loaddata()">//howToLoad是指令的attr
        <div>你好</div>
    </hello>
</div>
<div ng-controller="myController2">
    <hello howToLoad="loaddata2()">
        <div>你好</div>
    </hello>
</div>
</body>
<script type="text/javascript" src="lib/angular.js"></script>
<script type="text/javascript">
    var myApp = angular.module("myApp", []);

    myApp.controller("myController", function ($scope, $sce) {
        $scope.myText = {"name": "fyy"};
        $scope.loaddata = function () {
            $scope.myText1={};

            angular.copy($scope.myText,$scope.myText1);
            console.log("我滑动了");
            console.log($scope.myText);
        }
    });
    myApp.controller("myController2", function ($scope, $sce) {
        $scope.myText = {"name": "fyy"};
        $scope.loaddata2 = function () {
            console.log("我滑动了2");
        }
    });
    myApp.directive("hello", function () {
        return {
            restrict: "AE",
            template: '<div ng-transclude></div><div>Hi everyone</div>',
            replace: false,
            transclude: true,
            link: function (scope, element, attr) {//可以传递指令的attr
                element.bind("mouseenter", function () {
                    scope.$apply(attr.howtoload);//应为attr.howtoload传递的实际上是一个字符串,要执行字符串其实就是执行eval函数,scope.$apply内部实际上是执行了eval(exp)这样的操作。
                });
            }
        }
    })
</script>
</html>

指令与指令之间的交互

<body>
    <div class="row">
        <div class="col-md-3">
            <superman strength>动感超人---力量</superman>//这里面有两个指令superman和strength
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <superman strength speed>动感超人2---力量+敏捷</superman>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <superman strength speed light>动感超人3---力量+敏捷+发光</superman>
        </div>
    </div>
</body>

js部分

var myModule = angular.module("MyModule", []);
myModule.directive("superman", function() {
    return {
        scope: {},
        restrict: 'AE',
        controller: function($scope) {//controller是暴露给其它指令的一个方法
            $scope.abilities = [];
            this.addStrength = function() {
                $scope.abilities.push("strength");
            };
            this.addSpeed = function() {
                $scope.abilities.push("speed");
            };
            this.addLight = function() {
                $scope.abilities.push("light");
            };
        },
        link: function(scope, element, attrs) {
            element.addClass('btn btn-primary');
            console.log("什么时候执行")
            element.bind("mouseenter", function() {
                console.log(scope.abilities);
            });
        }
    }
});
myModule.directive("strength", function() {
    return {
        require: '^superman',//从哪个指令里重用方法
        link: function(scope, element, attrs, supermanCtrl) {//第四个参数就是重用的指令中的controller对象
            console.log(supermanCtrl);
            supermanCtrl.addStrength();
            console.log("加strength");
        }
    }
});
myModule.directive("speed", function() {
    return {
        require: '^superman',
        link: function(scope, element, attrs, supermanCtrl) {
            supermanCtrl.addSpeed();
            console.log("加speed");
        }
    }
});
myModule.directive("light", function() {
    return {
        require: '^superman',
        link: function(scope, element, attrs, supermanCtrl) {
            supermanCtrl.addLight();
            console.log("加light");
        }
    }
});

这个例子还可以帮助我们看看link函数的执行过程:为何传个图片这么难!!!! enter image description here

可以看到执行顺序为 superman.link strength.link superman.link,stength.link,speed.link superman.link,stength.link,speed.link,light.link

评论
发表评论
暂无评论
WRITTEN BY
PUBLISHED IN
angularjs

angularjs 学习总结

友情链接 大搜车前端团队博客
我的收藏