我正在使用 angularjs / angular-ui 与 groovy& grails 。
1)我的ApplicationResources.groovy
angularJs {
resource url:'https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js'
}
angularUI {
dependsOn 'angularJs'
dependsOn 'jQuery'
resource url:'https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.css',attrs:[rel: "stylesheet", type:'css']
resource url:'https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js'
resource url:'https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui-ieshiv.min.js'
}
angularStrap {
dependsOn 'angularJs'
dependsOn 'bootstrapJs'
dependsOn 'datepicker'
resource url: 'js/angular-strap/angular-strap.min.js'
resource url: 'js/angular-strap/timepicker.js'
}
angularUserApp {
dependsOn 'angularResources'
dependsOn 'angularUI'
dependsOn 'angularStrap'
resource url:'js/angular-app/user/app.js'
resource url:'js/angular-app/user/controller/KnowledgeController.js'
resource url:'js/angular-app/user/service/KnowledgeService.js'
}
userJs { resource url:'js/user.js' }
2)ngular-app模块(user / app.js)
var user = angular.module('user', [ 'ui', '$strap.directives' ]);
user.value('ui.config', {
jq : {
tooltip : {
placement : 'bottom'
}
}
});
3)user/controller/KnowledgeController.js
KnowledgeController.$inject = [ '$scope', '$http', 'knowledgeService'];
4)带有user.gsp
的布局ng-app
<html ng-app="user" lang="en">
<!-- other code goes here -->
</html>
5)knowledge.gsp
ng-controller
<html>
<head>
<meta name="layout" content="user">
</head>
<body>
<div id="controller" class="container-fluid" ng-controller="KnowledgeController">
<g:form id="uploadKnowledge" enctype="multipart/form-data">
<fieldset class="gray">
<div>
<label for="name">Knowledge Name </label>
<input type="text" name="name" ng-model="knowledge.name" ui-jq="tooltip" title="Knowledge name" required/>
</div>
</div>
<r:require modules="angularUserApp" />
<r:require modules="bootstrapJs" />
<r:require modules="userJs" />
<r:require modules="angularJs" />
<r:require modules="angularStrap" />
</body>
</html>
呈现knowledge.gsp时,出现以下错误
Error: ui-jq: The "tooltip" function does not exist
at Object.compile (https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js:7:5102)
at ja (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js:49:236)
at V (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js:41:488)
at V (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js:42:70)
at V (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js:42:70)
at V (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js:42:70)
at V (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js:42:70)
at V (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js:42:70)
at V (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js:42:70)
at V (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js:42:70)
我可以看到angular-ui https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js
已正确加载(截图位于下方)。