第一种写法:
-
-
<html>
-
-
<head>
-
<meta charset="utf-8">
-
<title></title>
-
</head>
-
-
<body>
-
<div ng-app="myApp">
-
<script type="text/ng-template" id="zippy.html">
-
<div>
-
<h3 ng-click="toggleContent()">{{title}} </h3>
-
<div ng-show="isContentVisiable" ng-transclude></div>
-
</div>
-
</script>
-
<input type="text" ng-model="model.title" />
-
<br />
-
<input type="text" ng-model="model.content" />
-
-
<zippy title="{{model.title}}">
-
the content is :{{model.content}}
-
</zippy>
-
</div>
-
<script type="text/javascript" src="../js/angular.min.js"></script>
-
<script type="text/javascript" src="../js/templateUrl.js"></script>
-
</body>
-
-
</html>
第二种写法是把html放在单独的html文件里面:
-
<div>
-
<h3 ng-click="toggleContent()">{{title}} </h3>
-
<div ng-show="isContentVisiable" ng-transclude></div>
-
</div>
-
var app = angular.module('myApp', []);
-
-
//app.run(function($templateCache) {
-
// $templateCache.put("zippy.html", " <div><h3 ng-click="toggleContent()">{{title}} </h3><div ng-show="isContentVisiable" ng-transclude></div></div>")
-
//});
-
-
app.directive('zippy',function ($templateCache) {
-
//console.log($templateCache.get("zippy.html"));
-
return {
-
restrict:'E',
-
transclude:true,
-
scope:{
-
title:'@'
-
},
-
templateUrl:'../node/templateUrl-zippy.html',
-
//template: $templateCache.get("zippy.html");
-
link: function(scope) {
-
scope.isContentVisiable = false;
-
scope.toggleContent = function() {
-
scope.isContentVisiable = !scope.isContentVisiable;
-
};
-
}
-
}
-
})
不过这里因为js目录是当前的目录,你的html目录肯定在另外一个文件夹里,所以自己记得路径的问题
-
-
<html>
-
-
<head>
-
<meta charset="utf-8">
-
<title></title>
-
</head>
-
-
<body>
-
<div ng-app="myApp">
-
<!--
-
<script type="text/ng-template" id="zippy.html">
-
<div>
-
<h3 ng-click="toggleContent()">{{title}}</h3>
-
<div ng-show="isContentVisiable" ng-transclude></div>
-
</div>
-
</script>
-
-->
-
<input type="text" ng-model="model.title" />
-
<br />
-
<input type="text" ng-model="model.content" />
-
-
<zippy title="{{model.title}}">
-
the content is :{{model.content}}
-
</zippy>
-
</div>
-
<script type="text/javascript" src="../js/angular.min.js"></script>
-
<script type="text/javascript" src="../js/templateUrl.js"></script>
-
</body>
-
-
</html>
第三种写法:把模板放在运行块里面
-
var app = angular.module('myApp', []);
-
-
app.run(function($templateCache) {
-
$templateCache.put("zippy.html", ' <div><h3 ng-click="toggleContent()">{{title}} </h3><div ng-show="isContentVisiable" ng-transclude></div></div>')
-
});
-
-
app.directive('zippy',function (/*$templateCache*/) {
-
//console.log($templateCache.get("zippy.html"));
-
return {
-
restrict:'E',
-
transclude:true,
-
scope:{
-
title:'@'
-
},
-
templateUrl:'zippy.html',
-
//templateUrl:'../node/templateUrl-zippy.html',
-
//template: $templateCache.get("zippy.html");
-
link: function(scope) {
-
scope.isContentVisiable = false;
-
scope.toggleContent = function() {
-
scope.isContentVisiable = !scope.isContentVisiable;
-
};
-
}
-
}
-
})
html文件:
-
-
<html>
-
-
<head>
-
<meta charset="utf-8">
-
<title></title>
-
</head>
-
-
<body>
-
<div ng-app="myApp">
-
<!--
-
<script type="text/ng-template" id="zippy.html">
-
<div>
-
<h3 ng-click="toggleContent()">{{title}}</h3>
-
<div ng-show="isContentVisiable" ng-transclude></div>
-
</div>
-
</script>
-
-->
-
<input type="text" ng-model="model.title" />
-
<br />
-
<input type="text" ng-model="model.content" />
-
-
<zippy title="{{model.title}}">
-
the content is :{{model.content}}
-
</zippy>
-
</div>
-
<script type="text/javascript" src="../js/angular.min.js"></script>
-
<script type="text/javascript" src="../js/templateUrl.js"></script>
-
</body>
-
-
</html>
建议还是使用第二种方法