• 【学】AngularJS日记(2)


    • 数组循环放到新生成的li
    <ul ng-init="arr=[12,5,6,394,344]">
        <li ng-repeat="item in arr">{{item}}</li>
    </ul>
    <!--这里的item只是个变量,名字随意,只的是循环数组中的每一项数据-->
    
    
    • 也可以加入数组的下标
    <ul ng-init="arr=[12,5,6,394,344]">
      <li ng-repeat="(index,value) in arr">{{index}}={{value}}</li>
    </ul>
    <!--记得要加括号,另外第一个参数是下标,第二个参数是每个下标对应的数据-->
    
    
    • 当然,循环json也是没有问题的
    <ul ng-init="json={'a':'abc','b':123,'c':'hello'}">
        <li ng-repeat="(key,value) in json">{{key}}={{value}}</li>
    </ul>
    <!--第一个参数是键,第二个参数是值,需要注意的是,既然ng-init后面用了双引号,那json里只能都用单引号了,如果还用双引号就会出错-->
    
    
    • 稍微复杂的例子
    <ul ng-init="arr=[{'name':'Victor','age':33},{'name':'Mary','age':30},{'name':'Qinyu','age':4}]">
        <li ng-repeat="item in arr">{{item.name}}:{{item.age}}岁</li>
    </ul>
    
    • 一个页面可以有很多Module,比如轮播图是个模块,导航是个模块,搜索是个模块,而一个模块下可以有很多controller
    <html ng-app="test"> <!--这里是module模块的名字-->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Insert title here</title>
    <script src="angular.1.5.8.min.js"></script>
    <style type="text/css">
    </style>
    <script type="text/javascript">
        var app = angular.module('test',[]); //定义一个名字为app的模块,在这个例子中app放在了<html>上,所以整个页面都受这一个module控制
        
        app.controller('cont1',function($scope){  //在这个app模块上定义了一个controller,名字是cont1
            $scope.a = 12; //在cont1控制器中定义了一个变量a
        });
        
        app.controller('cont2',function($scope){ //在这个app模块上定义了一个controller,名字是cont2
            $scope.b = 5; ////在cont2控制器中定义了一个变量b
        });
    </script>
    </head>
    <body >
    <div ng-controller="cont1"> <!--//只有在cont1控制下的元素能访问到a变量-->
        <span>{{a}}</span>
    </div>
    <div ng-controller="cont2"> <!--//只有在cont2控制下的元素能访问到b变量-->
        <span>{{b}}</span>
    </div>
    </body>
    </html>
    

    依赖注入:
    好处是,函数的参数的名字是定死的,比如$scope, $rootScope,而且参数只要名字对了,没有顺序规定


    自定义指令directive的时候,如果要用到restrict:M的时候,用的是注释<!-- directive:hello --> ,这里的hello是自定义的指令名称,而且目前的1.5.8版本里,还要在returnjson里写上 replace:true;

    app.directive('hello',function(){
        return {
            restrict:'ECMA',
            template:'<div>Hello World</div>', //也可以用templateUrl
            replace:true,
            link:function(scope,ele,attr){
                ele.bind('mouseenter',function(){
                    scope.$apply('printout()'); //调用的是对应的controller里的printout方法
                });
            }
        };
    });
    
    

    同一个指令可以用在不同的controller里面,实现指令在不同controller下使用的的方法,就是在自定义标签里加上自定义属性,根据属性值的不同,调用controller下不同的方法

    var app = angular.module('myApp',[]);
    app.controller('start_no1',['$scope',function($scope){
        $scope.printout_1 = function(){
            console.log('start');
        };
    }]);
    //这里定义了2个不同的controller,都想用下面自定义的指令hello,它们有不同的函数printout_1和printout_2
    app.controller('start_no2',['$scope',function($scope){
        $scope.printout_2 = function(){
            console.log('start222'); 
        };
    }]);
    
    app.directive('hello',function(){ //指令就一个,但是里面绑定事件用到的函数写在$apply()的参数里,而这时,attr就是指的该标签attr的自定义属性名,以为着,调用的时候执行该标签里的属性,这个例子里自定义的是hi属性
        return {
            restrict:'ECMA',
            template:'<div>Hello World</div>',
            replace:true,
            link:function(scope,ele,attr){
                ele.bind('mouseenter',function(){
                    scope.$apply(attr.howtoload); //这里的函数调用只要写函数名,因为前面的$apply已经是执行了,另外这个howtoload都要小写,即使在标签里是驼峰式的写法howToLoad,为了避免失误,可以在标签都保持小写即可
                });
            }
        };
    });
    
        </script>
    </head>
    <body >
    <div ng-controller="start_no1">
        <hello howToLoad="printout_1()"></hello>  <!--这里在指令hello标签里写上自定义属性hi,然后指定它等于不同controller里的函数-->
    </div>
    <div ng-controller="start_no2">
        <hello howToLoad="printout_2()"></hello>
    </div>
    
  • 相关阅读:
    第二节:ts变量声明、通用js数据类型、ts新数据类型、ts类型补充
    第一节:TypeScript简介(特点、编译环境、运行模式)、基于webpack 或 ts-node运行ts详解
    第十七节:Vuex4.x 之Module详解(局部状态、命名空间、辅助函数等) 和 补充nexttick用法
    第十六节:Vuex4.x 简介及state、getters、mutations、actions详解(OptionApi 和 CompositionApi)
    第十五节:VueRouter4.x用法之router-link/router-view的v-slot、动态增删路由、路由导航守卫
    第十四节:VueRouter4.x简介、基本用法、路由懒加载(打包分析)、动态路由、路由嵌套、相关Api
    第十三节:Vue3高级之 render/h函数、jsx、自定义指令、teleport、插件
    HTML让内部元素居中
    蓝桥杯 Web 应用开发模拟赛首次公开!参赛选手速进!
    蓝桥杯历年真题你刷了吗?过来人教你逆袭!
  • 原文地址:https://www.cnblogs.com/bluefantasy728/p/5851400.html
Copyright © 2020-2023  润新知