【学】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的时候，用的是注释 ，这里的hello是自定义的指令名称，而且目前的1.5.8版本里，还要在return的json里写上 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>

巴特西

【学】AngularJS日记（2）

最新文章

热门文章