我只是在学习Angularjs,以及如何使用templateUrl来加载模板.
我有一个简单的指令:
var mainApp = angular.module("mainApp", []);
mainApp.directive("request", function() {
return {
restrict: "E",
scope: {
data: "@"
},
templateUrl: "te.html"
}
})
我尝试使用这样的指令:
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.0.0.js"></script>
<script src="js/angular.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<script src="js/bootstrap.js"></script>
<script src="js/main.js"></script>
<style type="text/css">
div {
background-color: cornflowerblue;
}
#appPanel {
width: 900px;
height: 1000px;
}
</style>
</head>
<body>
<div id="appPanel" ng-app="mainApp" class="container">
<div class="row-fluid" style="height: 15%">
<div class="span12">
title
</div>
</div>
<div class="row-fluid" style="height: 85%">
<div class="span3" style="height: 100%">
actions
</div> …我正在学习angularjs,我正在尝试ng-repeat创建一个svg图.
我有这个HTML:
<svg>
<g id="g_{{$index}}" ng-repeat="i in range" ng-cloak>
<rect x="{{i / 5}}" y="{{i / 5}}" width="{{i / 5}}" height="{{i / 5}}"></rect>
</g>
</svg>
'range'只是一个简单的数组,在控制器中定义如下:
$scope.range = [100, 200, 300];
HTML正在运行; rects在我的页面上呈现.
但是,Chrome不断抛出以下错误:
Error: Invalid value for <rect> attribute height="{{i / 5}}" js/angular.js:1584
JQLiteClone js/angular.js:1584
JQLite.(anonymous function) js/angular.js:2163
publicLinkFn js/angular.js:3862
ngRepeatWatch js/angular.js:13641
Scope.$digest js/angular.js:7889
Scope.$apply js/angular.js:8097
js/angular.js:961
invoke js/angular.js:2857
resumeBootstrapInternal js/angular.js:959
bootstrap js/angular.js:973
angularInit js/angular.js:934
js/angular.js:14756
fire js/jquery-2.0.0.js:2863
self.fireWith js/jquery-2.0.0.js:2975
jQuery.extend.ready js/jquery-2.0.0.js:398
completed js/jquery-2.0.0.js:93
它似乎不太像我在做什么......
有谁知道为什么我收到这个错误？