<!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(formData)"> Send Msg</button>
</div>
<hr/>
<H3> 回應 </H3>
<div id="msg-list" >
<msg-box data="m" ng-repeat="m in messages track by $index"></msg-box>
</div>
</body>
</html>
app = angular.module('baseApp', [])
app.controller('baseController', function($scope, article, messages, messageServ) {
$scope.article = article
$scope.formData = messageServ.formData
$scope.messages = messages
$scope.sendMsg = messageServ.sendMsg
})
app.directive('msgBox', function() {
return {
restrict: 'E',
templateUrl: 'msg-box.html',
scope: {
data: "="
}
}
});
app.service('article',function(){
this.title = "Karma - Spectacular Test Runner for Javascript";
this.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.service('messages',function(){
return [
{content:"Hello!", from: "ALi"},
{content:"哈囉 !!!!!!!!!!!", from: "Ann" },
{content:"這是測試", from: "Bee"}
];
});
app.factory('messageServ',function(messages){
self = this
self.defaultFormData = {
content: 'Hello World !',
from: 'Mm'
};
self.cleanFormData = function(formData) {
formData.content = "";
formData.from = "";
return formData
}
self.clone = function(formData) {
return JSON.parse(JSON.stringify(formData));
}
return {
formData: self.defaultFormData,
sendMsg: function(formData){
cloneFormData = self.clone(formData);
messages.push(cloneFormData);
formData = self.cleanFormData(formData)
}
};
});
<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;
}