[java学习9]angularJS之指令练习

曾经终败给现在 2022-07-15 03:49 166阅读 0赞

html:

<!DOCTYPE html>
    <html lang="en" ng-app="appDer">
    <head>
        <meta charset="UTF-8">
        <title>测试directive</title>
        <script src="frameWork/angular.js"></script>
        <script src="frameWork/jquery-3.1.0.min.js"></script>
        <script src="js/testDerictive.js"></script>
    </head>
    <body>
    
    <h4>元素的形式</h4>
    <div ng-controller="classOne">一年级信息
        <dir-students type="2"></dir-students>
        <my-directive>my-directive指令
            <div>这里是my-directive指令的嵌套内容</div>
            <my-info></my-info>
        </my-directive>
    </div>
    
    <div ng-controller="classTwo">二年级信息
        <dir-students type="1">
            <div>这里是内部内容</div>
        </dir-students>
    </div>
    
    <div ng-controller="classThree">同一controller的动态绑定
        <dir-class-info info="oneClass"></dir-class-info>
        <dir-class-info info="twoClass"></dir-class-info>
        <drink flavor = {
       {someFlavor}}></drink>
    </div>
    
    <h3>这种继承的指令不能放一起，因为用的不是独立的scope</h3>
    <div><superman strength>超人－力量</superman></div>
    <div><superman strength speed="80">超人－力量速度</superman></div>
    <div><superman strength speed="120" light="">超人－力量速度发光</superman></div>
    
    </body>
    </html>

javascript:

/**
     * Created by liyanq on 16/10/31.
     * 目的是为了练习指令
     * 1,restrict:A:attributes;E:element;M:comment(注释);C:class
     * 2,transclude:为true的时候，可以在模版中增加<div ng-transclude></div>来保留标签内部内容.可以处理嵌套
     * 3,replace:是否替换指令中的内容,例：<div>replace内容</div>
     * 4,scope:返回一个对象，但并不是controller的scope;利用这个，可以在同一控制器内实现数据的动态绑定。而且优先级要高于templateUrl
     * 5,templateUrl:这个返回的函数里面只能有这两个参数，第一个是元素，第二个是属性.并且U大写。
     * 6,link:function link(scope, element, attrs, controller, transcludeFn)
     * 7,controller:属于自己的controller，为了给其他指令调用。
     * 8,require:要求的指令必须创建，属性和元素都可以，不创建的话link的transcludeFn为空～～～
     *
     * 注意
     * 1,指令是在控制器里面的元素，能和控制器的数据关联。
     * 2,dateFilter是angular的内部函数,date指令和dateFilter效果一样
     * 3,指令获取标签属性有：templateUrl、link、scope
     *
     *
     * 指令中scope的绑定策略
     * 1，@ 把当前属性当作字符串来传递，不是对象。还可以绑定来自外层scope的值，在属性值中加入{
       {}}即可；
     * 2，＝ 与父scope中的属性进行双向绑定。
     * 3，& 传递一个来自父scope的函数，稍后调用。
     * 4，这个作用域还真重要，利用link不能替代它，比如动态绑定controller里面的内容。
     *
     *
     *
     * 服务笔记：看到一个记下一个
     * 1，$templateCache：缓存模版，可以多个指令使用。
     * 2，$scope
     * 3，$http
     */
    var app = angular.module("appDer", []);
    app.controller("classOne", function ($scope) {
        $scope.studentInfos = [
            {name: "s1", age: 30},
            {name: "s2", age: 25},
            {name: "s3", age: 32}
        ];
        $scope.myFilter = function (item) {
            return item.age > 25;
        };
        $scope.format = 'M/d/yy h:mm:ss a';
    }).controller("classTwo", function ($scope) {
        $scope.studentInfos = [
            {name: "s1", age: 30},
            {name: "s2", age: 25},
            {name: "s3", age: 32}
        ];
        $scope.myFilter = function (item) {
            return item.age < 35;
        }
    }).controller("classThree", function ($scope) {
        $scope.oneClass = [
            {name: "oneClass1", age: 30},
            {name: "oneClass2", age: 25},
            {name: "oneClass3", age: 32}
        ];
        $scope.twoClass = [
            {name: "twoClass1", age: 30},
            {name: "twoClass2", age: 25},
            {name: "twoClass3", age: 32}
        ];
        $scope.myFilter = function (item) {
            return item.age < 35;
        };
        $scope.someFlavor = "青岛啤酒";
    
        $scope.getClassData = function(){
            return $scope.oneClass;
        }
    }).directive("myDirective", function () {
        return {
            restrict: "AE",//不推荐c和m
            // 只能在link里面控制dom元素，现在是绑定了鼠标移动事件
            template: "<div>我的信息：</div><div ng-transclude ></div>",
            transclude: true,
            replace: false
        };
    }).directive("myInfo", function () {
        return {
            restrict: "E",
            template: "<div>灵眼儿上方</div>"
        };
    }).directive("dirStudents", function ($templateCache) {
        return {
            restrict: "E",
            templateUrl: function (elem, attr) {
                console.log(attr.type);
                return $templateCache.get("templateStudet")
            },
            replace: false
        };
    }).directive("dirClassInfo", function ($templateCache) {
        return {
            restrict: "E",
            replace: false,
            templateUrl: $templateCache.get("templateStudet"),
            scope: {
                studentInfos:"=info"
            },
            link: function (scope, elem, attr) {
                // console.log(this.scope);//只是指令的scope对象.Object {studentInfos: "=info"}
            }
        };
    }).directive("drink",function () {
        return {
            scope:{flavor:"@"},
            template: "<div>喝的饮料：{
       {flavor}}</div>"
        };
    }).run(function ($templateCache) {
        $templateCache.put("templateStudet", "templates/Components/studentInfos.html");
    });
    
    
    /**------------动感超人例子-----------------------
     *
     * */
    app.directive("superman", function () {
        dirController = function ($scope) {
            $scope.attr = [];
            this.addStrength = function(){
                $scope.attr.push("strength");
            };
            this.addSpeed = function(val){
                $scope.attr.push("speed:" + val);
            };
            this.addLight = function(){
                $scope.attr.push("light");
            }
        };
        dirlink = function(scope,element,attr){
            element.bind("mouseenter",function () {
                console.log(scope.attr);
            })
        };
        return{
            scope:{},
            controller:dirController,
            link:dirlink
        }
    }).directive("strength", function(){
        return{
            require:"^superman",
            link:function(scope,elem,attr,supermanCtr){
                supermanCtr.addStrength(scope);
            }
        }
    }).directive("speed", function(){
        return{
            require:"^superman",
            link:function(scope,elem,attr,supermanCtr){
                supermanCtr.addSpeed(attr.speed);
            }
        }
    }).directive("light", function(){
        return{
            require:"^superman",
            link:function(scope,elem,attr,supermanCtr){
                supermanCtr.addLight();
            }
        }
    });

studentInfos.html