美文网首页
菜鸡学AngularJS 12 模块化 网上的一个示例

菜鸡学AngularJS 12 模块化 网上的一个示例

作者: 菜鸡 | 来源:发表于2016-07-29 12:36 被阅读13次
    PS:有点绕 琢磨一下。。。。。。
    <!doctype html>
    <html ng-app = "myapp" ng-controller = "Test">
    <head>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body >
    <div>
        <ul>
            <li ng-repeat="List in Userlist">
                <label>{{List.Username}}</label><br />
                <label>{{List.Title}}</label><span>{{List.LikeAmount}}</span><like content = "List">点赞标签</like><br />
                <label>{{List.Time}}</label>
            </li>
        </ul>
    </div>
    
    </body>
    <script>
    var app = angular.module('myapp', []);
    app.controller("Test", function($scope){
        $scope.Userlist = [
            {Username:'张三',Title:'标题一号',Time:'2016-07-29',LikeAmount:0},
            {Username:'李四',Title:'标题二号',Time:'2016-07-29',LikeAmount:0},
            {Username:'二麻',Title:'标题一号',Time:'2016-07-29',LikeAmount:0},
        ];
    });
    
    app.directive ("like",function(){
        var direction = {};
        direction.restrict = 'AE';
        direction.template = '<button ng-click="like()">点击</button>';
    
        direction.scope = {
            content:"="
        };
    
        direction.link = function ($scope,element){
            $scope.like = function (){
                $scope.content.LikeAmount = $scope.content.LikeAmount + 1;
            };
        };
    
        return direction;
    
    });
    
    
    </script>
    </html>

    相关文章

      网友评论

          本文标题:菜鸡学AngularJS 12 模块化 网上的一个示例

          本文链接:https://www.haomeiwen.com/subject/rtdzjttx.html