AngularJs实战（三）

最新推荐文章于 2021-04-08 14:30:39 发布

小鱼儿_zhang

最新推荐文章于 2021-04-08 14:30:39 发布

阅读量361

点赞数

分类专栏： AngularJS（前言）

本文链接：https://blog.csdn.net/qq_20261343/article/details/50278125

版权

AngularJS（前言）专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这里写图片描述

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
    return {
        restrict: 'AECM',
        templateUrl: 'hello.html', //url 模板
        replace: true
    }
});

//在页面中命名用：
<body>
        <hello></hello>
</body>

这里写图片描述

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
    return {
        restrict:"AE",
        transclude:true, //变换
        template:"<div>Hello everyone!<div ng-transclude></div></div>"
        //<div ng-transclude> :表示指令内部嵌套的内容放在哪个位置，从而保留内部
        //内容，不被替换
    } 
});
================================================
<body>
        <hello>
            <div>这里是指令内部的内容。</div>
        </hello>
    </body>

================指令与控制器之间的交互============================
/**
 * 自定义控制器
 */
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
    $scope.loadData=function(){
        console.log("加载数据中...");
    }
}]);
myModule.controller('MyCtrl2', ['$scope', function($scope){
    $scope.loadData2=function(){
        console.log("加载数据中...22222");
    }
}]);

/**
 * 实现 自定义指令 的复用
 */
myModule.directive("loader", function() {
    return {
        restrict:"AE",
        link:function(scope,element,attrs){

            //元素绑定事件，这个元素就是自定义的指令，就是对自定义的指令进行绑定事件操作
            element.bind('mouseenter', function(event) {

                //缺点：如果在不同的控制器中使用这个指令，但是指令中调用的方法却不一样
                // 这时，这种调用控制器方法就不适合了。
                //scope.loadData(); //调用控制器中的方法
                // scope.$apply("loadData()"); //调用控制器中的方法


                //根据不同的控制器，指令来自动调用不同的方法，这时就必须自定属性了
                //利用属性来完成，在不同的控制器中 自定义指令调用不同的控制器方法
                // 注意这里的坑，howToLoad会被转换成小写的howtoload
                scope.$apply(attrs.howtoload);
            });
        }
    } 
});
//使用：
<body>
        <div ng-controller="MyCtrl">
            <!--
                loader ：自已定义的指令
                howToLoad：自已定义的属性
            -->
            <loader howToLoad="loadData()">滑动加载</loader>
        </div>

        <div ng-controller="MyCtrl2">
            <loader howToLoad="loadData2()">滑动加载</loader>
        </div>
    </body>

==================指令与指令之间的交互 ==========================
var myModule = angular.module("MyModule", []);

/**
 * 自定义指令
 */
myModule.directive("superman", function() {
    return {
        scope: {}, //创建独立的作用域
        restrict: 'AE',
        //指令内部的 控制器，与angular 中的控制器不一样
        //作用：是指令向外面暴露一些公共的方法，供外面使用的
        controller: function($scope) {
            $scope.abilities = [];

            //向外面暴露方法
            this.addStrength = function() {
                $scope.abilities.push("strength");
            };
            this.addSpeed = function() {
                $scope.abilities.push("speed");
            };
            this.addLight = function() {
                $scope.abilities.push("light");
            };
        },
        //操作DOM 或绑定事件
        link: function(scope, element, attrs) {
            //元素添加 class样式
            element.addClass('btn btn-primary');

            //元素绑定事件
            element.bind("mouseenter", function() {
                console.log(scope.abilities);
            });
        }

        /**
         * 总结：1.如果指令要各外面暴露一些公共的方法就写在controller中
         *       2.link :是用于处理指令内部的一些事务的，例绑定事件、绑定数据等
         */
    }
});

myModule.directive("strength", function() {
    return {
        require: '^superman', //说明 strength 指令是依赖于 superman指令的

        //这时，可以传入第四个参数 supermanCtrl，是angular自动注入进来的
        //这时可以使用 superman 向外面暴露的方法了
        link: function(scope, element, attrs, supermanCtrl) {
            supermanCtrl.addStrength();
        }
    }
});
myModule.directive("speed", function() {
    return {
        require: '^superman',
        link: function(scope, element, attrs, supermanCtrl) {
            supermanCtrl.addSpeed();
        }
    }
});
myModule.directive("light", function() {
    return {
        require: '^superman',
        link: function(scope, element, attrs, supermanCtrl) {
            supermanCtrl.addLight();
        }
    }
});

//例子：
<body>
    <div class="row">
        <div class="col-md-3">
            <superman strength>动感超人---力量</superman>
        </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>

小鱼儿_zhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs实战（三）

var myModule = angular.module("MyModule", []);myModule.directive("hello", function() { return { restrict: 'AECM', templateUrl: 'hello.html', //url 模板 replace: true }})
复制链接

扫一扫

专栏目录