<!doctype html>
<html ng-app="baseApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="baseController">
<H1> {{ article.title}} </H1>
<div class="article-content"> {{ article.content }} </div>
<hr />
<H3> 留言 </H3>
<div id="msg-form" >
<msg-box data="formData"></msg-box>
<div>
<label>Name</label>
<input type="text" ng-model="formData.from"/>
</div>
<textarea ng-model="formData.content" row="4"> </textarea>
<button ng-click="sendMsg()"> Send Msg</button>
</div>
<hr/>
<H3> 回應 </H3>
<div id="msg-list" >
<msg-box data="m" ng-repeat="m in messages"></msg-box>
</div>
</body>
</html>
app = angular.module('baseApp', [])
app.controller('baseController', function($scope) {
$scope.messages = [
{content:"Hello!", from: "ALi"},
{content:"哈囉 !!!!!!!!!!!", from: "Ann" },
{content:"這是測試", from: "Bee"}
];
$scope.formData = {
content: "Karma !!!!",
from: "MM ^__^"
};
$scope.sendMsg = function(){
$scope.messages.push($scope.formData);
$scope.formData = {content: "", form: ""};
};
$scope.article = {
title: "Karma - Spectacular Test Runner for Javascript",
content: "On the AngularJS team, we rely on testing and we always seek better tools to make our life easier. That's why we created Karma - a test runner that fits all our needs."
};
})
app.directive('msgBox', function() {
return {
restrict: 'E',
templateUrl: 'msg-box.html',
scope: {
data: "="
}
}
});
<div class="msg-box">
<div class="msg-content">{{data.content}}</div>
<span>From : {{data.from}}</span>
</div>
.article-content {
width: 600px;
}
.msg-box {
border: 1px solid #000;
margin: 10px;
padding: 10px;
position: relative;
width: 300px;
}
.msg-box .msg-content {
padding: 10px;
}
.msg-box span {
bottom: 5px;
position: absolute;
right: 10px;
}
#msg-form textarea {
width: 400px;
height: 120px;
}