Angular指令生成独立作用域及dom操作

来源：互联网发布：王者荣耀英雄数据分析编辑：程序博客网时间：2024/06/06 13:11
<!DOCTYPE html>  <html ng-app="myApp" ng-controller="myController">  <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>ng-Document</title>  </head><body>     <test item=item ng-repeat="item in data"></test>  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>  <script type="text/javascript">    var app = angular.module('myApp',[]);    app.controller('myController',function($scope){      $scope.data = [                    {                        username: 'jack111',                        src: '111',                        images: [                            {                                name: 'S1E1',                                src: 'S1E1'                            },                            {                                name: 'S1E2',                                src: 'S1E2'                            },                            {                                name: 'S1E3',                                src: 'S1E3'                            }                        ]                    },                    {                        username: 'jack222',                        src: '222',                        images: [                            {                                name: 'S2E1',                                src: 'S2E1'                            },                            {                                name: 'S2E2',                                src: 'S2E2'                            },                            {                                name: 'S2E3',                                src: 'S2E3'                            }                        ]                    },                    {                        username: 'jack333',                        src: '333',                        images: [                            {                                name: 'S3E1',                                src: 'S3E1'                            },                            {                                name: 'S3E2',                                src: 'S3E2'                            },                            {                                name: 'S3E3',                                src: 'S3E3'                            }                        ]                    }                ];    });    app.directive("test",function(){      return{        restrict:'AE',        scope:{          item:'='        },        template:`        <div>          <h1>{{item.username}}</h1>          <p>{{firstImg?firstImg:getFirst(item.images)}}</p>          <div ng-repeat="image in item.images">            <button ng-click="sayHi(image.src)">{{image.name}}</button>          </div>        </div>        `,        link:function(scope,element,attrs){          scope.sayHi = function(src){            scope.firstImg = src;          };          scope.getFirst = function(image){            scope.firstImg = image[0].src;          }        }      }    })  </script></body>  </html>
阅读全文
0 0