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

最新推荐文章于 2021-12-31 17:56:29 发布

灵眼儿上方

最新推荐文章于 2021-12-31 17:56:29 发布

阅读量286

点赞数

分类专栏： java相关文章标签： angularjs 指令

本文链接：https://blog.csdn.net/liyanq528/article/details/52995122

版权

java相关专栏收录该内容

25 篇文章 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

<pre name="code" class="html"><div class="container">
    <ul>
        <li ng-repeat="info in studentInfos|filter:myFilter">
            姓名：{{info.name}};年龄{{info.age}}
        </li>
    </ul>
</div>