angularJs 练习

发布时间：2020-12-17 10:32:24 所属栏目：安全来源：网络整理

导读：!DOCTYPE htmlhtmlhead lang="en" meta charset="UTF-8" script src="framework/1.3.0.14/angular.js"/script script src="framework/1.3.0.14/angular-route.js"/script script src="framework/1.3.0.14/angular-animate.js"/script script src="js/test2.j

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="framework/1.3.0.14/angular.js"></script>
    <script src="framework/1.3.0.14/angular-route.js"></script>
    <script src="framework/1.3.0.14/angular-animate.js"></script>
    <script src="js/test2.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/services.js"></script>
    <script src="js/directives.js"></script>
    <title>练习</title>
</head>
<body>
    <div ng-app="app">
        <food apple orange banana >所有类别</food>
    </div>
</body>
</html>

/**
 * Created by dell on 2016/9/6.
 */

var app = angular.module('app',[]);

app.directive('food',function () {
    return {
        restrict: 'E',$scope:{},controller: function ($scope) {
            $scope.foods = [];
            this.addApple = function () {
                $scope.foods.push('apple');
            }
            this.addOrange = function () {
                $scope.foods.push('orange');
            }
            this.addBanana = function () {
                $scope.foods.push('banana');
            }
        },link:function(scope,element,attrs)
        {
            element.bind('mouseenter',function(){
                console.log(scope.foods);
            })
        }
    }
})

app.directive('apple',function(){
    return {
        require:'food',attrs,foodCtrl){
            foodCtrl.addApple();
        }
    }
})

app.directive('orange',foodCtrl){
            foodCtrl.addOrange();
        }
    }
})

app.directive('banana',foodCtrl){
            foodCtrl.addBanana();
        }
    }
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!