<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--<script src="https://my.oschina.net/blackshb/blog/js/jquery/1.8.3/jquery.min.js" type="text/Javascript" charset="utf-8"></script>-->
<script src="https://my.oschina.net/blackshb/blog/js/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app
//自定義指令
.directive("dtMymsg", function() {
return {
scope: false,// 默認值，共享父級作用域
controller: function($scope, $element, $attrs, $transclude) {},
restrict : "AEC",//A屬性E元素C類名
template : "<h1>您有{{msgNum}}條新消息，清註意查看!</h1>"
};
})
//控制器
.controller('myCtrl', function($scope) {
$scope.proName = "Test";
$scope.testData = "https://my.oschina.net/blackshb/blog/Hello";
$scope.arrDemo = ['han','bing','shi'];
$scope.msgNum = 1;
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl" ng-init="startTime=0;endTime=5">
<p>項目名字:<input type="text" ng-model="proName"></p>
<p>項目開始時間:<input type="text" ng-model="startTime"></p>
<p>項目結束時間:<input type="text" ng-model="endTime"></p>
<p>新消息數目:<input type="text" ng-model="msgNum"></p>
<p>項目耗時:共計{{endTime - startTime}}小時</p>
<h1>{{ testData }} {{ proName }}</h1>
<ul>
<li ng-repeat="i in arrDemo">{{ i }}</li>
</ul>
<dt-mymsg></dt-mymsg>
<div dt-mymsg></div>
<div class="dt-mymsg"></div>
</div>
</body>
</html>
Tags: javascript function element return 控制器
文章來源：