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

来源：互联网发布：php超全局变量编辑：程序博客网时间：2024/06/02 02:00

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>

0 0