angular-自定义模块 

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <script src="../js/angular.js"></script>
    <meta charset="UTF-8">
    <title>自定义模块</title>
</head>
<body ng-controller="MainCtrl">
    <im-item item="msg" avatar="images/impic.png" avatar-click="aClick(item)"></im-item>
    <script>
        app = angular.module('app', []);

        app.controller('MainCtrl', function ($scope) {
            $scope.msg="fengfeng";
            $scope.aClick=function(item){
                console.log(item);
            }
        });
        app.directive('imItem', function(){
            return {
                restrict: 'E',
                replace:true,
                scope:{
                    item:'=',
                    avatar:'@',
                    avatarClick:'&'
                },
                link:function(scope, el, attrs) {
                    console.dir(scope);
                    console.dir(el);
                    console.dir(attrs);
                    scope.onAvatarClick=function(item){
                        console.log("aa");
                        scope.avatarClick({item:item});
                    }
                },
                template:
                "<div>"+
                    "<img ng-src='{{avatar}}' ng-click='onAvatarClick(item)'>"+
                "</div>"
            }
        });
    </script>
<!--打印顺序  aa fengfeng-->
</body>
</html>
posted @ 2017-07-31 17:18  追随内心$放飞自我  阅读(199)  评论(0)    收藏  举报