Question

我必须建立一个网站。当您按下IMG时，它会将指令中的模板添加到另一个div。

详细地说，我的网站上有3个imgs。汉堡，可乐和瘸子。当您按其中一个时，它会将其添加到订单列表中。

HTML code：

<!DOCTYPE HTML>
<html ng-app="myApp">
    <head>
        <script src="scripts/angular.min.js"></script>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <link rel="Stylesheet" type="text/css" href="styles/style.css">
        <title>Food Center</title>
        <script src="scripts/skrypt.js"></script>
    </head>
    <body>
        <h1 class="ladne"><center>Food Center</center></h1>
        <div class="d1"  ng-controller="myCtrl" myDir1>
            <img src="styles/img/cola.gif"></img>
            <img src="styles/img/fryt.gif"></img>
            <img src="styles/img/ham.gif"></img>
            <br>
            <div class="zam" >
                Date of order: {{data | date:'yyyy-MM-dd'}}
                <br>
                Your Order:
            </div>
        </div>
    </body>
</html>

控制器代码：

var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
    $scope.data = new Date();
    $scope.hamburger ={
        name: 'Hambureger',
    }
    $scope.frytki = {
        name: 'Frytki',
    }
    $scope.cola = {
        name: 'Coca-Cola',
    }
});

myApp.directive('dir1', function () {
    return {
        restrict: 'A',
        template: '<br>{{hamburger.nazwa}}'
    };
});

我真的不明白这些指令。如果你可以帮助我会很好。

AngularJS指令ng-click

0 个答案: